如何利用HTML5实现图片文件异步上传

小编给大家分享一下如何利用HTML5实现图片文件异步上传，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

1.文件未选择 2.文件已选择

HTML代码部分：

思路：下面代码中我利用css的z-index属性将input="file”标签隐藏在了id=btnSelect元素下面，通过触发a标签的点击后，弹出文件选择框。下面的masklayer用于点击确认按钮后的弹出层，避免用户重复点击确认按钮。

<div id="wp" class="warpper">

<a id="btnSelect">单击选择要上传的照片</a>

<input id="uploadFile" type="file" name="myPhoto" />

<button id="btnConfirm" class="btn" >确认上传</button>

</div>

<div id="maskLayer" class="mask-layer" style="display:none;">

<p>图片正在上传中...</p>

</div>

JS图片文件验证部分：

验证部分为：大小，是否已经选择，文件的类型 三个部分。第一个createObject方法为创建本地图片文件的预览路径，依次验证是否为空，文件类型以及文件大小，不满足条件则一律返回

false,满足以上3个条件后，在dom中生成图片预览，添加img元素，然后利用createObjectURL()方法获取预览路径。

代码：

//获取数据的URL地址

function createObjectURL(blob) {

if (window.URL) {

return window.URL.createObjectURL(blob);

} else if (window.webkitURL) {

return window.webkitURL.createObjectURL(blob);

} else {

return null;

}

}

//文件检测

function checkFile() {

//获取文件

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

//文件为空判断

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

alert("请选择您要上传的文件！");

$$("btnSelect").innerHTML = "单击选择要上传的照片";

return false;

}

//检测文件类型

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

alert("请选择图片文件！");

return false;

}

//计算文件大小

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

if (size > 5000) {

alert("上传文件不得超过5M!");

return false;

};

//添加预览图片

$$("btnSelect").innerHTML = "<img class=/"photo/" src=/""+createObjectURL(file)+"/"/>";

};

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实现图片文件异步上传”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！