Native JavaScript implements asynchronous multi-file upload _javascript techniques

This is the modified version of the previous article. The background code can then be used, but the script no longer uses jquery, instead of the native JavaScript code, so we mainly look at the JS code.

Introduce the technical parameter first:

Page Technology: HTML5

Background technology: Servlet 3.0

Server: Tomcat 7.0

Scripting: JavaScript

HTML5 The new properties of the file component

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

multiple: allow multiple files to be selected
HTML5 page Code modified

<br/> <input type= "
file" id= "pic" name= "pic" onchange= " Printfileinfo () "accept=" image/* "multiple=" multiple "/> <input type=
" button "value=" Upload picture "onclick=" UploadFile () "/><br/>
<div id=" parent ">
<div id=" son "></div>
</div >

Accept values can be read as follows: IANA MIME Type (a complete list of standard MIME types), and if you are using DW development, the software itself is prompted.

If you select more than one file, you can use JS to do cyclic printing, look at the file name, type and size, see the demo code

function Printfileinfo () {
 
 var picfile = document.getElementById ("pic"); 
 var files = picfile.files;
 for (var i=0; i<files.length; i++) {
  var file = files[i];
  var div = document.createelement ("div")
  div.innerhtml = "The First (" + (i+1) + ") file name:" + file.name +
  ", File type:" + File.typ E + ", File size:" + file.size 
  document.body.appendChild (div)
 }
}

Now that you can recycle multiple files, you can try uploading multiple files.

1, first create the XMLHttpRequest object

This is a global variable. Because it is an example, there is no way to determine the browser type, and the lower version of IE will cause problems if it is written.
var xhr = new XMLHttpRequest ()
2, the previous article introduced the Progress event (Progress), this time realizes Progress and the error 2 events

Error: Triggered when an error occurs on the request.

Upload failure due to upload error: uploadfailed ()

Upload failed
function uploadfailed (evt) {
 alert ("Upload failed");
}
Progress: constant triggering during receiving the corresponding period.　

corresponding Upload progress method: OnProgress ()
/**
 * Detection attachment upload situation, this method about 0.05-0.1 seconds to perform
 a
/function onprogress (evt) {
var loaded = evt.loaded;       Already uploaded size situation 
 var tot = evt.total;       Total size of the attachment 
 var per = Math.floor (100*loaded/tot);   The percentage already uploaded 
$ ("#son"). html (per + "%");
 $ ("#son"). CSS ("width", per + "%");

The last is the upload method, note that the above HTML code upload method also needs to be changed to this uploadfile () method to normal use.

 Upload file
function uploadfile () {
//upload multiple 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]);

 Monitor event
 Xhr.upload.addEventListener ("Progress", onprogress, false);
 Xhr.addeventlistener ("Error", uploadfailed, False)//Send file and form custom parameters
 Xhr.open ("POST", "upload");
 Remember to add the upload data formData
xhr.send (formData);
} 

PS: This is after all only the basic function of the demo sample, the requirements of the company's use is still 108,000 miles, please use the company platform carefully.

You can combine this article to learn: How to implement a HTML5 Ajax file upload progress bar (jquery version)

The above is the entire content of this article, I hope to help you learn.