Ajax file Upload, Ajax

Ajax file Upload, Ajax

Don't say anything, directly on the code!

<input type= "File" id= "file" Name= "MyFile" onclick= "Clearprogressinfo ()"/><span id= "Progressinfo" style= " Display:none; " ><progress id= "ProgressBar" value= "0" max= "></progress><span id=" percentage "></span" ></span><br/><input type= "button" onclick= "Upladfile ()" value= "Upload"/>

JS Code

function Upladfile () {var fileobj = document.getElementById ("file"). Files[0];//JS Get file object var Filecontroller = "/file/sav Efile.do "; Backend address//FormData object to receive upload file var form = new FormData (); Form.append ("Author", "Hooyes"); Can increase the form data form.append ("file", fileobj); File object//XMLHttpRequest object var xhr = new XMLHttpRequest (); Xhr.open ("Post", Filecontroller, true); xhr.onload = function () { Alert ("Upload complete!");}; 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 Background processing:

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 very Request");} Receive file Multipartfile Documentfile = multipartrequest.getfile ("file");//Get file name 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 file Upload, Ajax