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 ""; } }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。