利用HTML5的新特点实现图片文件异步上传

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

利用网页hTML5教程的新特点做相关站点文件异步上传非常简单方便，本文主要展示JS部分，html结构。下面的具体代码并未使用第三发库，如果有参照，请注意一些未展现出来的具体代码片段。我这边的具体效果预览：

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").inner网页hTML = "单击选择要上传的照片";
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").inner网页hTML = "<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);
}
}
});

以上则为全部主要具体代码部分，如果有什么问题可以联系我，欢迎交流。