ajax 文件上傳，ajax

ajax 文件上傳，ajax

 

啥也不說了，直接上代碼！

 

<input type="file" id="file" name="myfile" onclick="clearProgressInfo()"/>
<span id="progressInfo" style="display:none;">
<progress id="progressBar" value="0" max="100"></progress>
<span id="percentage"></span>
</span><br/>
<input type="button" onclick="UpladFile()" value="上傳" />

js代碼

 

 

function UpladFile() {
	var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象
	var FileController = "/file/saveFile.do"; // 接收上傳文件的後臺地址 

	// FormData 對象
	var form = new FormData();
	form.append("author", "hooyes"); // 能夠增長表單數據
	form.append("file", fileObj); // 文件對象

	// XMLHttpRequest 對象
	var xhr = new XMLHttpRequest();
	xhr.open("post", FileController, true);
	xhr.onload = function() {
		// alert("上傳完成!");
	};
	
	document.getElementById('progressInfo').style.display = "";
	xhr.upload.addEventListener("progress", progressFunction, false);

	xhr.send(form);
}

function clearProgressInfo()
{
	document.getElementById('progressInfo').style.display='none';
	document.getElementById("progressBar").value = 0;
	document.getElementById("percentage").innerHTML = "";
}

function progressFunction(evt) {
	var progressBar = document.getElementById("progressBar");
	var percentageDiv = document.getElementById("percentage");
	if (evt.lengthComputable) {
		progressBar.max = evt.total;
		progressBar.value = evt.loaded;
		percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
	}
}

java後臺處理：

 

 

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.util.Streams;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.mvc.multiaction.MultiActionController;

import com.okcoin.util.Logs;

@Controller
@RequestMapping(value="/file/*.do")
public class FileController extends MultiActionController{
	
	public String saveFile(HttpServletRequest request,HttpServletResponse response) throws IOException
	{
		MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
		MultipartHttpServletRequest multipartRequest = null;
		try {
			multipartRequest = resolver.resolveMultipart(request);
		} catch (Exception e) {
			Logs.geterrorLogger().error("AdminAccountController submitVerifyFile 很是的請求");
		}
		
		//接收文件
		MultipartFile documentFile = multipartRequest.getFile("file");
		//獲取文件名
		String documentFileName=documentFile.getOriginalFilename();
		System.out.println("FileName:" + documentFileName);
		
		BufferedInputStream in = new BufferedInputStream(documentFile.getInputStream());
		BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream("D:\\Users\\" + documentFileName));
		Streams.copy(in, out, true);
		System.out.println("copy finished.");
		return "";
	}
}