首页 > 网页制作 > html5

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

admin html5 2022-02-06 02:52:41 HTML5   图片文件   异步上传"
利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构。下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段。我这边的效果预览:

1.文件未选择 2.文件已选择
 
 
HTML代码部分:

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

复制代码代码如下:



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 = "";
};

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);
}
}
});

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

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/html5/75712.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持