ajax 文件上传

概述啥也不说了，直接上代码！&ltinput type="file" id="file" name="myfile" onclick="clearProgressInfo()"/&gt&ltspan id="progressInfo" style="display:none;"&gt&ltprogress id="prog

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

<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); // 文件对象 // XML@R_502_6822@Request 对象 var xhr = new XML@R_502_6822@Request(); 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.@R_502_6822@.@R_502_6822@ServletRequest;import javax.servlet.@R_502_6822@.@R_502_6822@ServletResponse;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.Multipart@R_502_6822@ServletRequest;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(@R_502_6822@ServletRequest request,@R_502_6822@ServletResponse response) throws IOException { MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext()); Multipart@R_502_6822@ServletRequest 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 ""; }}

总结

以上是内存溢出为你收集整理的ajax 文件上传全部内容，希望文章能够帮你解决ajax 文件上传所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。