HTML5 Multi-image drag upload with progress bar

Objective

Yesterday, using the clip property of Css2 to realize the Web page progress bar feel good, but in many cases, we use the progress bar in those times, the General page loading if there is a need to use, then the problem comes, how to calculate the entire load is complete, is the main module loading complete page, or window.onload after the count, on these aspects, I really dare not answer, because of business needs, this article wants to say is in the picture upload the progress bar used.

Effect Show

For more information, please go to Html5demo

HTML5 new drag-and-drop related event description

1.ondragover

The demo is what you see to drag the file not just the picture to the top of the Div, as long as the mouse touches the div to trigger the event, showing that the drop zone border turns pale green

2.ondragleave

The event that triggers when the mouse drags a file away, showing the drop-zone border as Gray

3.ondrop

Mouse in the Drag area button release, in this function trigger read file, preview effect, upload server operation

HTML5 new Read File API Filereader/formdata

Drag area mouse button release, then will read the file stream, if it is a picture directly can see the picture, otherwise only show the file name, with JS How to read the file stream, it is necessary to use the FileReader object,

Many of the object's property events, such as Onload,readasdataurl,abort,onprogress, are clicked

The preview code after the upload of the slice is as follows

varReader =NewFileReader (); Reader.onload=function(event) {//after the file is loaded, the contents of the event object are taken from result, regardless of success, the value is placed in result                    varImage =NewImage (); IMAGE.SRC=Event.target.result; Image.width= 250;//a fake resizeHolder.appendchild (image);                }; Reader.readasdataurl (file); //indicates that a file is read as a string that begins with data: The data URL, which embeds the small file directly                //document Scheme, if you do not write this sentence, then will not show because the document does not have IMAGE.SRC data

In this way the file can be previewed, then what to do after the preview, and then the post data to the server

Then the problem is, how to post data, I do not have a form form here, and no IFRAME, at this time, thoroughly use the new features of HTML5

Formdata simulate the form data and then submit it with XMLHttpRequest to take advantage of the XMLHttpRequest upload.onprogress event

Implement progress bar Progress calculation.

First on the code

functionreadfiles (files) {//Debugger;            varFormData = Tests.formdata?NewFormData ():NULL;  for(vari = 0; i < files.length; i++) {                if(tests.formdata) formdata.append (' file ', files[i]);//Adding table cellsPreviewfile (Files[i]); }            //Now post a new XHR request            if(tests.formdata) {varXHR =NewXMLHttpRequest (); if(tests.progress) {//Upload Progress EventXhr.upload.onprogress =UpdateProgress; } Else{Console.log ("Upload in new XMLHttpRequest not supported"); } xhr.open (' POST ', ' WebForm1.aspx ');//Submit Server HandlerXhr.onload =function() {//Set the progress bar value to three after loading is completeProgress.value = 100; Progress.innerhtml= 100 + "%";                };                Xhr.send (FormData); Xhr.onreadystatechange=function () {                    if(Xhr.readystate = = 4 && xhr.status = 200) {                        //alert (xhr.responsetext);                    }                }; functionUpdateProgress (event) {//Debugger;                    if(event.lengthcomputable) {//event.loaded How many bytes are loaded event.total Total number of bytes                        varComplete = (event.loaded/event.total * 100 | 0); Console.log ("Complete->", complete); Progress.value= 100; Progress.innerhtml= 100 + "%";            }                }; }        }

Or the back-end WebForm1.aspx code, back-end processing request code

  protected voidPage_Load (Objectsender, EventArgs e) {httpfilecollection Files=Request.Files;  for(inti =0; I < files. Count; i++)            {                stringR =NewRandom (). Next (0,9).                ToString (); stringfilename = DateTime.Now.ToString ("yyyymmddhhmmsss") + R +Files[i]. Filename.substring (Files[i]. Filename.lastindexof (".")); stringPath = Server.MapPath ("~/images/") +filename; Files[i].            SaveAs (path); } Response.Write ("upload is completed!"); //Thread.Sleep (+);Response.End (); }

Summarize

The test encountered a problem, that is, the XMLHttpRequest upload.onprogress event is not as expected to be a sense of progress, do not know because the server is local, or the method is called the wrong way

Always find that only one call is made and then the byte stream that is loaded is the same as the total byte stream, without a sense of polling progress. The drag-and-drop to detect browser compatibility first, remember, if the browser does not support the Drag property or

To do compatibility processing. Finally, I enclose an ASP. HTML5 drag-and-drop upload image with progress bar demo

My level is limited, if there are errors in the text or need to make suggestions, please point out, if you think it is good to support a bit.

HTML5 Multi-image drag upload with progress bar