Shulou(Shulou.com)06/03 Report--

This article mainly shows you "html5 how to achieve asynchronous file upload", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "html5 how to achieve file asynchronous upload" this article.

1 introduction

It is never a pleasure to develop file upload function, especially asynchronous upload, and upload solutions that have used iframe and Flash also feel very awkward. This article briefly introduces the use of Html5 FormData to achieve asynchronous file upload, but also can achieve upload progress bar and file size verification. The server uses the scheme of springMVC for processing.

2 Html Cod

3 JQuery upload

$("# submit-btn") .on ('click', function () {$.ajax ({url: "/ test/upload", type: "post", data:new FormData ($("# myForm"). Get (0)), / / very important Cannot omit cache: false, processData: false, contentType: false, success: function () {alert ("upload successful!") ;}})

4 JQuery file size verification

The control of file size and corresponding behavior needs to be handled on its own as needed, and this method is only an example method.

On ('change', function () {var file = this.files [0]; if (file.size > 1024cm 1000) {alert (' maximum file size') })

5 JQuery progress bar

Add xhr to the ajax method to control the upload progress, and the progress bar can use the progress of html5 or other progress bars. Showing and hiding the progress bar needs to be handled on its own. This method only briefly introduces the basic control of the progress bar.

Xhr: function () {var myXhr = $.ajaxSettings.xhr (); if (myXhr.upload) {myXhr.upload.addEventListener ('progress', function (e) {if (e.lengthComputable) {$(' progress'). Attr ({value: e.loaded, max: e.total,}) }}, false);} return myXhr;}

6 springMVC server

6.1 maven dependency

Commons-io commons-io 2.5 commons-fileupload commons-fileupload 1.3.2

6.2 servlet-context.xml

6.3 Controller

The sample 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 u_photo) {System.out.println ("uplink photo=" + u_photo.getSize ()); return "ok";}

7 compatibility

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

The above is all the contents of the article "how to upload files asynchronously by html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.