利用HTML5的新特点做文件异步上传很easy方便，本文主要展示JS部分。html结构。以下的代码并未使用第三发库，假设有參照，请注意一些未展现出来的代码片段。
我这边的效果预览：
1.文件未选择 2.文件已选择
HTML代码部分：
思路：以下代码中我利用css的z-index属性将input="file”标签隐藏在了id=btnSelect元素以下，通过触发a标签的点击后，弹出文件选择框。
以下的masklayer用于点击确认button后的弹出层，避免用户反复点击确认button。
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); } } });
以上则为所有主要代码部分。假设有什么问题能够联系我。欢迎交流。
作者：Ziv小威
出处： 关于作者：专注于Java技术的程序猿一枚。此外对JS开发保持着较高的兴趣。爱好音乐，阅读。FM等等。 本文版权归作者和博客园共同拥有，欢迎转载，但未经作者允许必须保留此段声明。且在文章页面明显位置给出原文连接。 如有问题，能够邮件：wewoor@foxmail.com 微博：