Ajax file upload, ajax

Ajax file upload, ajax

Don't talk about anything, just go to the code!

<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> <br/> <input type = "button" onclick = "UpladFile () "value =" Upload "/>

Js Code

Function UpladFile () {var fileObj = document. getElementById ("file "). files [0]; // js obtains the file object var FileController = "/file/saveFile. do "; // The background address for receiving the uploaded file // FormData object var form = new FormData (); form. append ("author", "hooyes"); // you can add 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 ('ssssinfo '). style. display = ""; xhr. upload. addEventListener ("progress", progressFunction, false); xhr. send (form);} function clearProgressInfo () {document. getElementById ('ssssinfo '). 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 high request");} // receives the file MultipartFile documentFile = multipartRequest. getFile ("file"); // get the 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 "";}}