HTML5 implementation of image file asynchronous upload

Using the new features of HTML5 file asynchronous upload is very simple and convenient, this article mainly shows the JS part, HTML structure. The following code does not use a third-party library, and if you have references, note some of the code fragments that are not shown. Preview of the effect on my side:

1. File not selected 2. File selected

HTML code section:

Idea: In the following code I use the CSS Z-index property to hide the input= "file" tag under the Id=btnselect element, by triggering a tag click, pop-up file selection box. The following masklayer is used to click the Confirmation button after the pop-up layer, to avoid the user repeatedly click the Confirm button.

    <DivID= "WP"class= "Warpper">                        <aID= "Btnselect">Click to select a photo to upload</a>            <inputID= "UploadFile"type= "File"name= "Myphoto" />                    <ButtonID= "Btnconfirm"class= "BTN" >Confirm Upload</Button>            </Div>    <DivID= "Masklayer"class= "Mask-layer"style= "Display:none;">        <P>The picture is being uploaded ...</P>    </Div>

JS picture file Verification Section:

The validation section is: size, whether it has been selected, the type of file three sections. The first CreateObject method is to create a preview path to the local picture file, verify that the file type and file size are empty, and then return

False, after the above 3 conditions are met, generate a picture preview in the DOM, add an IMG element, and then use the Createobjecturl () method to get the preview path.

Code:

    //gets the URL address of the data    functionCreateobjecturl (BLOB) {if(window. URL) {returnwindow.        Url.createobjecturl (BLOB); } Else if(window.webkiturl) {returnWindow.webkitURL.createObjectURL (BLOB); } Else {            return NULL; }    }        //File Detection    functioncheckfile () {//Get File        varFile = $$ ("UploadFile"). Files[0]; //file is null-judged        if(File = =NULL|| File = = =undefined) {Alert ("Please select the file you want to upload!" "); $$("Btnselect"). InnerHTML = "Click to select photos to upload"; return false; }                //Detecting file Types        if(File.type.indexOf (' image ') = = =-1) {alert ("Please select a picture File!" "); return false; }                //Calculate File Size        varSize = Math.floor (file.size/1024);if(Size > 5000) {alert ("Upload files must not exceed 5m!"); return false;                }; //Add a preview picture$$ ("Btnselect"). InnerHTML = "; };

JS Ajax Request Section:

Note: The first listener selects the change event, satisfies the validation criteria, performs a preview, the second event listens for the response to the popup when the Btnselect is clicked, and the following is an event listener confirming the upload button to begin sending an AJAX request. The CREATEXHR () method here is to create the XMLHttpRequest object, and the code I did not post, including the AddEventListener () method, can refer to other articles in 2 sections.

    //Monitor Picture URL address ChangeAddEventListener ($$ ("UploadFile"), "change",function() {checkfile ();        }); //Listen Click the file selection buttonAddEventListener ($$ ("Btnselect"), "click",function() {        //Pop-up file selection box$$ ("UploadFile"). Click ();    }); //Monitor the Click events of the Confirm upload buttonAddEventListener ($$ ("btnconfirm"), "click",function(e) {if(Checkfile ()) {Try {                //perform an upload operationvarXHR =createxhr (); $$("Masklayer"). Style.display = "Block"; Xhr.open ("Post", "/uploadphoto.action",true); Xhr.setrequestheader ("X-requested-with", "XMLHttpRequest"); Xhr.onreadystatechange=function() {                    if(Xhr.readystate = = 4) {                        varFlag =Xhr.responsetext; if(flag = = "Success") {alert ("Image upload successful!" "); } Else{alert ("Image upload successful!" ");                                                }; $$("Masklayer"). Style.display = "None";                };                }; //form Data                varFD =NewFormData (); Fd.append ("Myphoto", $$ ("UploadFile"). Files[0]); //Execute SendXhr.send (FD); } Catch(e) {console.log (e);        }        }        }); 

The above is all the main code section, if there is any problem can contact me, welcome to communicate.

Ziv Small Granville
Source: http://imziv.com/
A programmer focused on Java technology, in addition to JS development to maintain a high interest. Love music, reading, FM and so on.
This article is copyrighted by the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link.
If you have any questions, you can email: [Email protected]
Micro-Blog: Ziv Small Granville