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

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) {

return window.URL.createObjectURL(blob);
} else if (window.webkitURL) {

} else { return null; } } //File detection

//Get file

//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.