Html5 implementation file asynchronous upload function

The upload function of the development file has never been a pleasant thing, and it is even more so for the upload of asynchronous uploads. I have used iframe and Flash upload schemes. They also feel very awkward. This article briefly uses the FormData of HTML5 to implement the asynchronous upload of files, and can also achieve upload entry bars and file size verification. The server uses the SpringMVC scheme for processing.

 <FORM ID = MyForm> <input Type = File ID = U_Photo name = u_photo/> <input type = Button ID = submit-btn value = upload/> </form>

 $ (#Submit-BTN) .on ('Click', Function () {$ .ajax ({url:/test/upload, type: post, data: new formdata ($ (#myform) .get (0)) , // It is very important. Can't omit Cache: False, ProcessData: False, ContentType: FALSE, SUCCESS: FUNCTION () {Alert (successful upload!);});});

The control of the file size and the corresponding behavior needs to be processed by itself as needed. This method is just an example method.

 $ ('#u_photo'). On ('Change', Function () {var file = this.files [0]; if (file.size> 1024*1000) {alert ('file maximum 1m!')}}}}} );

Add XHR to the AJAX method to control the upload progress. The progress bar can use the Progress of HTML5 or other progress bars. Showing and hidden progress bar need to be processed by itself. This method simply introduces the basic control of the progress bar.

 XHR: Function () {var myxhr = $ .ajaxSettings.xhr (); if (myxhr.upload) {myxhr.upload.addeventristener ('Progress', Function (E) {If) hcomputable) {$ ('Progress ') .attr ({value: e.loaded, max: e.total,});}}, false);} Return myxhr;}

 <Dependency> <GroupId> Commons-IO </Groupid> <Artifactid> Commons-IO </ArtiFactid> <Version> </Version> </Dependency> <GROUPID> Commons- Fileupload </Groupid> <Arttifactid > Commons-Fileupload </Artifactid> <Version> 1.3.2 </version> </dependency>

 <bean id = multipartResolver class = org.springframework.web.multipart.commonsMonsMultipResolver />

The example program does not give the corresponding code for file verification, storage and processing.

 @RequestMapping (Value =/Test/Upload, Method = RequestMethod.post) @ResponsebodyPublic String upload (@Requestparam (U_Photo) MultipartFile _photo) {system.out.println (u_photo =+u_photo.getsize ()); Return ok;}

IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

If you are not satisfied with the above plan, it is recommended to use the following solutions:

Jquery file uploader

The above is the asynchronous upload function of the HTML5 implementation file introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!