HTML5 file Implementation drag and drop upload

Through the HTML file API, Firefox, Chrome and other browsers have supported the direct drag of files from the operating system, and uploaded to the server.

This is a revolutionary advance relative to the HTML form that has been used for more than 10 of years. Although IE's backwardness lets many developers still wait and see, but the Gmail mailbox attachment drag and drop function already to some users to bring the great convenience, but needs the massive uploading file the CMS (Content management System) also will benefit from it.

Let's take a look at how Firefox uses the drag-and-drop upload feature:

First, provide an area to place the file

HTML code

<div name= "image" Id= "Dropbox" style= "min-width:300px;min-height:100px;border:3px dashed;" ></div>

Then listen to the DragEnter, DragLeave, drop events in the drag-and-drop process

JS Code

document.addeventlistener ("DragEnter", Function (e) {      Dropbox.style.borderColor = ' Gray ';  }, False);  Document.addeventlistener ( "DragLeave", Function (e) {      dropbox.style.borderColor = ' Silver ';  }, False);   Dropbox.addeventlistener ("DragEnter", Function (e) {      Dropbox.style.borderColor = ' Gray ';      dropbox.style.backgroundColor = ' white ';  } , false);  Dropbox.addeventlistener ("DragLeave", Function (e) {      Dropbox.style.backgroundColor = ' Transparent ';  }, False);  Dropbox.addeventlistener ("DragEnter", Function (e) {      e.stoppropagation ();      e.preventdefault ();   }, False);  Dropbox.addeventlistener ("DragOver", Function (e) {      e.stoppropagation ();      e.preventdefault ();  }, False);  Dropbox.addeventlistener ("Drop", function (e) {      e.stoppropagation ();       E.preventdefault ();            handlefiles ( E.datatransfer.files);            submit.disabled = false;   }, false);

The most important of these is that all files are processed sequentially by Handlefiles () in the drop event

JS Code

Handlefiles = function (files) { for (var i = 0; i < files.length; i++) { var file = Files[i]; } }

For a picture type of file, you can read the content directly, showing the preview

JS Code

if (!file.type.match (/image*/)) { Continue } var img = document.createelement ("img"); Img.classList.add ("obj"); Img.file = file; Preview.appendchild (IMG); var reader = new FileReader (); Reader.onload = (function (aimg) {return function (e) {aimg.src = E.target.result;};}) (IMG); Reader.readasdataurl (file);

Next is the core function: Ajax upload. Create a new XHR request first

JS Code

var xhr = new XMLHttpRequest (); Xhr.open (' Post ', '/file/upload ', true);

Monitor upload progress and complete events

JS Code

Xhr.upload.addEventListener ("Progress", function (e) { if (e.lengthcomputable) { var percentage = Math.Round (e.loaded *)/e.total); img.style.opacity = 1-percentage/100.0; } }, False); Xhr.upload.addEventListener ("Load", function (e) { }, False);

Finally, simulate the data into a multipart/form-data format to upload

JS Code

Xhr.setrequestheader ("Content-type", "Multipart/form-data, boundary=" +boundary); Simulate a file MIME POST request. Xhr.setrequestheader ("Content-length", fileSize); var body = '; Body + + "--" + Boundary + "RN"; Body + = "content-disposition:form-data; Name= "" +dropbox.getattribute (' name ') + ""; Filename= "" + FileName + "RN"; Body + + "Content-type:" +filetype+ "RNRN"; Body + + Filedata + "RN"; Body + + "--" + Boundary + "--RN"; Xhr.sendasbinary (body);