今天小编跟大家讲解下有关利用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="btn/confirm/i"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($$("btn/confirm/i"),"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); } } }); 以上则为全部主要代码部分 如果有什么问题可以联系我 欢迎交流。来源：爱蒂网
