Shulou(Shulou.com)06/01 Report--

Xiaobian to share with you how to use HTML5 to achieve asynchronous upload of image files, I believe most people still do not know how to share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

1. File not selected 2. File selected

HTML code section:

Idea: In the following code, 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 as a pop-up layer after clicking the OK button to prevent the user from clicking the OK button repeatedly.

Click to select photos to upload

Confirm upload

The image is currently being uploaded.

JS Picture File Verification Section:

Verify that the three parts are: size, whether it has been selected, and type of file. The first createObject method is to create the preview path of the local image file. Verify whether it is empty, file type and file size in turn. If it does not meet the conditions, it will return

false, after meeting the above three conditions, generate a preview of the image in dom, add img element, and then use createObjectURL() method to get the preview path.

Code:

//Get URL of 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 files

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

//file is empty

if (file === null || file === undefined) {

alert("Please select the file you want to upload! ");

$$("btnSelect")[xss_clean] = "Click to select photos to upload";

return false;

}

//detect file type

if(file.type.indexOf('image') === -1) {

alert("Please select a picture file! ");

return false;

}

//calculate file size

var size = Math.floor(file.size/1024);

if (size > 5000) {

alert("Upload files must not exceed 5M! ");

return false;

};

//Add preview image

$$("btnSelect")[xss_clean] = "

";

};

JS Ajax请求部分：

说明：第一个监听文件选择更改事件，满足验证条件后则执行预览，第二个事件监听为监听单击btnSelect时弹出窗口的响应，下面的则是确认上传按钮的事件监听，开始发送Ajax请求。此处的createXHR()方法为创建XMLHttpRequest对象，代码我并未贴出，包括addEventListener()方法，这2个部分可以参考其他文章。

复制代码

代码如下:

复制代码

//监听图片URL地址更改

addEventListener($$("uploadFile"), "change", function() {

checkFile();

});

//监听单击文件选择按钮

addEventListener($$("btnSelect"), "click", function() {

//弹出文件选择框

$$("uploadFile").click();

});

//监听确认上传按钮的点击事件

addEventListener($$("btnConfirm"), "click", function(e) {

if (checkFile()) {

try {

//执行上传操作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("图片上传成功!");

} else {

alert("图片上传成功!");

};

$$("maskLayer").style.display = "none";

};

};

//表单数据

var fd = new FormData();

fd.append("myPhoto", $$("uploadFile").files[0]);

//执行发送

xhr.send(fd);

} catch (e) {

console.log(e);

}

}

});

以上是"如何利用HTML5实现图片文件异步上传"这篇文章的所有内容，感谢各位的阅读!相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.