File upload action can not be too vulgar, the page must not be refreshed upload

Life is never too late to start

　　Haven't updated the blog for a long time, to tell the truth, every day to open the blog Park always feel very empty, not not in practice, but because recently in follow Bo old-timers to complete a very important mission-to build our own adventure Empire, good nonsense not much to say, first I in Beijing to bring you good, I hope you can reach your own preset height in 2018.

General Operations upload files

1 <form action= "xxx.action" method= "post" enctype= "Multipart/form-data" >2     <input Type= "File" Name= "UserFile" multiple><br>3     <input type= "Submit" value= "Upload" >  </form>

　　Click on the Seductive submit button to upload, OK, Finish! Believe that a lot of big guys are still using the above simple and rough way to complete the file upload action, brother, what era, but also in this way, if you submit such code up, face will be swollen, we want to be page no refresh upload Oh, hahaha ~ ~ ~

Page no refresh upload file

　　To complete this graceful operation, it is necessary to first recognize the XMLHttpRequest object, XMLHttpRequest which is an API that provides the client with the ability to transfer data between the client and the server. It provides a simple way to get data through a URL and does not refresh the entire page. This allows the page to update only a subset of the pages without disturbing the user. XMLHttpRequest is used extensively in AJAX. Speaking here, someone said, you sell a half-day Xiaoguanzi, is not asynchronous upload, Ajax who will not, minutes of the matter on the elegant finish, but I want to say that Ajax is important also still can be very good to complete this action, sometimes professional things to professional people to do the effect is very good.

Next, I'll emphasize that because the next xmlhttprequest we're talking about is XMLHttpRequest level 2, because XMLHttpRequest Level 1 has the following limitations:

• Only text data transfer is supported and binary data cannot be transferred.
• When transferring data, there is no progress information prompt, only prompts whether to complete.
• Restricted by the browser's same-origin policy, only the same domain resources can be requested.
• There is no time-out mechanism to control the AJAX request rhythm.

But XMLHttpRequest Level 2 makes good improvements to these flaws:

• Support binary data, you can upload files, you can use the Formdata object to manage the form.
• Provides a progress hint to get the transfer progress through the Xhr.upload.onprogress event callback method.
• is still restricted by the same-origin policy, and this security mechanism will not change. XHR2 provides access-control-allow-origin such as headers, which is set to * to allow any domain name requests for cross-domain cors access (read more about cors for more information).
• Timeout and ontimeout can be set to set the timeout length and post-timeout processing.

Currently, mainstream browsers basically support XMLHttpRequest Level 2, except that the IE series requires IE10 and later. Therefore, the following IE10 are not supported for XHR2.

Code to run

The entire upload action is summed up as a sentence: the formdata mentioned here is our most common way, by creating a new Formdata object in the script, set the file object to the form item, and then use XMLHttpRequest asynchronous upload to the background server, It is very simple to complete the graceful action.

<!---<type= "file"  name= " UserFile "  onchange=" fileselected (this); multiple />

<Scripttype= "Text/javascript">    functionfileselected (userfile) {uploadfile (userfile); }    functionUploadFile (userfile) {varFD= NewFormData (); //Formdata Object        varlength=userfile.files.length; //get the number of selected files (single file directly append)         for(varI=0; I<length; I++) {fd.append ("UserFile", Userfile.files[i]); //append multiple files to Formdata        }        //fd.append ("UserFile", Userfile.files[0]); Single file append to Formdata        varXHR= NewXMLHttpRequest (); //XMLHttpRequest ObjectXhr.open ("POST", "${qy}/upload/uploadfiles"); //Initializing a request        //Note: All related event bindings must be made before the Send () method is called.Xhr.send (FD);//send the request. If the request is in asynchronous mode (the default), the method returns immediately. Conversely, if the request is in synchronous mode, the method will not return until the requested response is fully accepted .    }</Script>

1      /**2 * Multi-File Upload3      * @paramfile4      * @return5      * @throwsException6      */7@RequestMapping (value= "/uploadfiles", method=requestmethod.post)8 @ResponseBody9      PublicString Uploadfiles (@RequestParam ("UserFile") multipartfile[] file)throwsexception{Ten         intFileNumber =file.length; One         if(FileNumber = = 0){ ALogger.info ("Upload content is empty"); -             return"Please select File"; -}Else{

Reference

XMLHttpRequest Api:https://developer.mozilla.org/zh-cn/docs/web/api/xmlhttprequest

Excellent blog url:http://louiszhai.github.io/2016/11/02/ajax/

File upload action can not be too vulgar, the page must not be refreshed upload