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

前端技术 2023/09/08 HTML
利用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\").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);
}
}
});


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

本文地址：https://www.stayed.cn/item/21490

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案