Asynchronous upload of image files using the new HTML5 features

Comments: Asynchronous file upload using the new HTML5 features is very simple and convenient. First, use the z-index attribute of css to hide the input = file tag under the id = btnSelect element, after clicking the tag is triggered, the pop-up file selection box uses the new HTML5 features for asynchronous file upload. This article mainly shows the JS part and html structure. The following code does not use the third release library. If you have any reference, pay attention to some undisplayed code snippets. Effect preview on my side:

1. File not selected 2. File selected
 
 
HTML code:

Idea: In the following code, I used the z-index attribute of css to hide the input = "file" tag under the id = btnSelect element. After a tag is clicked, the file selection box is displayed. The following masklayer is used to click the pop-up layer after the confirmation button, so that you do not need to click the confirmation button again.

The Code is as follows:
<Div id = "wp" class = "warpper">
<A id = "btnSelect"> click to select the photo to upload </a>
<Input id = "uploadFile" type = "file" name = "myPhoto"/>
<Button id = "btnConfirm" class = "btn"> confirm upload </button>
</Div>
<Div id = "maskLayer" class = "mask-layer" style = "display: none;">
<P> the image is being uploaded... </p>
</Div>

JS image file Verification Section:

The verification part is size, whether it has been selected, and the file type. The first createObject method is to create the preview path of the local image file, and verify whether it is null, the file type, and the file size in turn. If the conditions are not met, the system will return

False. After the preceding three conditions are met, the image preview is generated in the dom, the img element is added, and the preview path is obtained using the createObjectURL () method.

Code:

The Code is as follows:
// Obtain the URL of the data.
Function createObjectURL (blob ){
If (window. URL ){
Return window. URL. createObjectURL (blob );
} Else if (window. webkitURL ){
Return window. webkitURL. createObjectURL (blob );
} Else {
Return null;
}
}
// File Detection
Function checkFile (){
// Obtain the object
Var file =$ $ ("uploadFile"). files [0];
// File null judgment
If (file = null | file = undefined ){
Alert ("select the file you want to upload! ");
$ ("BtnSelect"). innerHTML = "click to select the photo to upload ";
Return false;
}
// Check the file type
If (file. type. indexOf ('image') =-1 ){
Alert ("select an image file! ");
Return false;
}
// Calculate the file size
Var size = Math. floor (file. size/1024 );
If (size & gt; 5000 ){
Alert ("the number of uploaded files cannot exceed 5 MB! ");
Return false;
};
// Add preview Image
$ ("BtnSelect"). innerHTML = " ";
};

JS Ajax request section:

Note: The first listening file selects the change event. After the verification conditions are met, the event is previewed. The second listening event is the response in the pop-up window when the listener clicks btnSelect, the following is an event listener that confirms the upload button and starts to send Ajax requests. The createXHR () method here is used to create the XMLHttpRequest object. I have not posted the Code, including the addEventListener () method. For more information about the two parts, see other articles.

The Code is as follows:
Copy code
// Listen for image URL changes
AddEventListener ($ ("uploadFile"), "change", function (){
CheckFile ();
});
// Click the file selection button for the listener
AddEventListener ($ ("btnSelect"), "click", function (){
// The file selection box is displayed.
$ ("UploadFile"). click ();
});
// Listen to the Click Event of the confirm upload button
AddEventListener ($ ("btnConfirm"), "click", function (e ){
If (checkFile ()){
Try {
// Execute the upload operation var xhr = createXHR ();
$ ("MaskLayer"). style. display = "block ";
Xhr. open ("post", "/uploadPhoto. action", true );
Xhr. setRequestHeader ("X-Requested-With", "XMLHttpRequest ");
Xhr. onreadystatechange = function (){
If (xhr. readyState = 4 ){
Var flag = xhr. responseText;
If (flag = "success "){
Alert ("image uploaded successfully! ");
} Else {
Alert ("image uploaded successfully! ");
};
$ ("MaskLayer"). style. display = "none ";
};
};
// Form data
Var fd = new FormData ();
Fd. append ("myPhoto", $ ("uploadFile"). files [0]);
// Execute sending
Xhr. send (fd );
} Catch (e ){
Console. log (e );
}
}
});

The above is all the main code. If you have any questions, please contact me.