Native JavaScript implements asynchronous Multifile upload _ javascript skills

This article mainly introduces native JavaScript Implementation of asynchronous multi-File Upload. If you are interested, refer to the modified version in the previous article. The background code can be used without changing, but the script no longer uses jQuery. Instead, it is changed to the native JavaScript code, so we mainly look at JS Code.

First introduce the technical parameters:

Page Technology: HTML5

Background technology: Servlet 3.0

Server: Tomcat 7.0

Script: JavaScript

HTML5New attributes of the file component

Accept:If you add this attribute to the file component, you can directly control the file type to be uploaded. This is very convenient.

Multiple:Whether multiple files can be selected
After the HTML5 Page code is modified

For the value of accept, see:Iana mime type (complete list of standard MIME types). If DW is used for development, the software itself prompts.

If multiple files are selected, you can use JS to print them cyclically. Check the file name, type, and size and view the Demo code.

Function printFileInfo () {var picFile = document. getElementById ("pic"); var files = picFile. files; for (var I = 0; I
 
  

  
Since multiple objects can be recycled, you can try to upload multiple objects.
  
1. Create an XMLHttpRequest object
  
// This is a global variable. Because it is an example, the browser type is not determined. If you write this code in earlier versions of IE, the problem may occur.
Var xhr = new XMLHttpRequest ()
2. The previous article introduced Progress events (progress). This time, two events are implemented: Progress and error.
  
Error: triggered when a request error occurs.
  
Upload Failed due to an error during the corresponding upload: uploadFailed ()
  

  
// Upload failure function uploadFailed (evt) {alert ("Upload Failed");} progress: continuously triggered during the receiving period. Corresponding upload progress method: onprogress ()/*** detects the attachment upload status. This method is executed every 0.05-0.1 seconds */function onprogress (evt) {var loaded = evt. loaded; // The uploaded size. var tot = evt. total; // total attachment size var per = Math. floor (100 * loaded/tot); // percentage of uploaded files $ ("# son" ).html (per + "% "); $ ("# son" ).css ("width", per + "% ");}
  

  
Finally, the upload method is used. Note that the method used for uploading in the preceding html code must be changed to the uploadFile () method for normal use.

  

  
// Upload File function uploadFile () {// put multiple uploaded files into formData var picFileList =$ ("# pic "). get (0 ). files; var formData = new FormData (); for (var I = 0; I <picFileList. length; I ++) {formData. append ("file", picFileList [I]);} // listens for event xhr. upload. addEventListener ("progress", onprogress, false); xhr. addEventListener ("error", uploadFailed, false); // custom parameters for sending files and forms xhr. open ("POST", "upload"); // remember to add formData xhr. send (formData );}
  

  
PS: after all, this is just a demo of the basic functions, which is 108,000 different from the company's requirements. Please be careful when using the company's platform.
  
You can use this article to learn how to implement the upload progress bar based on HTML5 Ajax (jquery version)
  
The above is all the content of this article, hoping to help you learn.