HTML5实现图片文件异步上传

发布时间：2023-09-06 01:36责任编辑：郭大石关键词：HTML

???????????????????????

利用HTML5的新特点做文件异步上传很easy方便，本文主要展示JS部分。html结构。以下的代码并未使用第三发库，假设有參照，请注意一些未展现出来的代码片段。

我这边的效果预览：

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

HTML代码部分：

　　思路：以下代码中我利用css的z-index属性将input="file”标签隐藏在了id=btnSelect元素以下，通过触发a标签的点击后，弹出文件选择框。

以下的masklayer用于点击确认button后的弹出层，避免用户反复点击确认button。

 ???<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时弹出窗体的响应。以下的则是确认上传button的事件监听，開始发送Ajax请求。此处的createXHR()方法为创建XMLHttpRequest对象。代码我并未贴出，包含addEventListener()方法，这2个部分能够參考其它文章。

 ???//监听图片URL地址更改 ???addEventListener($$("uploadFile"), "change", function() { ???????????????????????????checkFile(); ???}); ???????//监听单击文件选择button ???addEventListener($$("btnSelect"), "click", function() { ???????//弹出文件选择框 ???????$$("uploadFile").click(); ???}); ???//监听确认上传button的点击事件 ???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实现图片文件异步上传

原文地址：https://www.cnblogs.com/zhchoutai/p/8280036.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。垃圾信息处理邮箱 tousu563@163.com 网站地图