ajax 文件上传

来源：互联网发布：java面向对象实验总结编辑：程序博客网时间：2024/06/17 11:49

啥也不说了，直接上代码！

<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 "";}}

1 0