Utilize the new features of HTML5 to achieve asynchronous upload of image files_html5 tutorial skills

It is very simple and convenient to use the new features of HTML5 to upload files asynchronously. This article mainly shows the JS part and html structure. The code below does not use a third-party library. If there is a reference, please pay attention to some code snippets that are not shown. The effect preview on my side:

1. The file is not selected 2. The file is selected


HTML code part:

Idea: In the code below, I use the z-index attribute of css to hide the input="file” tag under the id=btnSelect element. After triggering the click of the a tag, the file selection box pops up. The masklayer below is used to click the confirm button. Pop-up layer to prevent users from repeatedly clicking the confirmation button. >The code is as follows:

Click to select the photo to upload< /a>

Confirm upload

The picture is being uploaded. ..

JS image file verification part:

The verification part is: size, whether it has been selected, file The type has three parts. The first createObject method is to create the preview path of the local image file, and verify whether it is empty, the file type and the file size. If the conditions are not met,

false will be returned. If the above three conditions are met, After the conditions, generate the image preview in the dom, add the img element, and then use the createObjectURL() method to obtain the preview path:

Copy code



The code is as follows:


//Get the URL address 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() {

//Get file

var file = $$( "uploadFile").files[0];

//Judge if the file is empty
if (file === null || file === undefined) {
alert("Please select the file you want to upload document! ");
$$("btnSelect").innerHTML = "Click to select the photo to upload";
return false;
}
//Detect file type
if(file .type.indexOf('image') === -1) {
alert("Please select an image file!");
return false;
}
//Calculate file size
var size = Math.floor(file.size/1024);
if (size > 5000) {
alert("The uploaded file must not exceed 5M!");
return false;
};
//Add preview image
$$("btnSelect").innerHTML = "";
};



JS Ajax request part:

Description: The first listener is for file selection change events. After the verification conditions are met, the preview is executed. The second event listener is Listen to the response of the pop-up window when btnSelect is clicked. The following is the event monitoring of the confirmation upload button to start sending the Ajax request. The createXHR() method here is to create the XMLHttpRequest object. I have not posted the code, including the addEventListener() method. , these 2 parts can refer to other articles. >The code is as follows:

Copy code
//Listen for image URL address changes
addEventListener($$("uploadFile"), "change", function() {
checkFile();
} );
//Listen to click the file selection button
addEventListener($$("btnSelect"), "click", function() {
//Pop up the file selection box
$$(" uploadFile").click();
});
//Listen to the click event of the confirmation upload button
addEventListener($$("btnConfirm"), "click", function(e) {
if (checkFile()) {
try {
//Perform 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 Send
xhr.send(fd);
} catch (e) {
console.log(e);
}
}
});

The above are all the main code parts. If you have any questions, please contact me and welcome to communicate.