微学网

热门关键词:   as  thinkphp  ecshop  商务通  xxx  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

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

发布时间:2017-05-13 来源:未知 点击:
点评:利用HTML5的新特点做文件异步上传非常简单方便,首先利用css的z-index属性将input=file标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构。下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段。我这边的效果预览: PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
1.文件未选择 2.文件已选择 PX9HTML5中文学习网 - HTML5先行者学习网
 PX9HTML5中文学习网 - HTML5先行者学习网
 PX9HTML5中文学习网 - HTML5先行者学习网
HTML代码部分: PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
思路:下面代码中我利用css的z-index属性将input="file”标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框。下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮。 PX9HTML5中文学习网 - HTML5先行者学习网

代码如下: PX9HTML5中文学习网 - HTML5先行者学习网
<div id="wp" class="warpper"> PX9HTML5中文学习网 - HTML5先行者学习网
<a id="btnSelect">单击选择要上传的照片</a> PX9HTML5中文学习网 - HTML5先行者学习网
<input id="uploadFile" type="file" name="myPhoto" /> PX9HTML5中文学习网 - HTML5先行者学习网
<button id="btnConfirm" class="btn" >确认上传</button> PX9HTML5中文学习网 - HTML5先行者学习网
</div> PX9HTML5中文学习网 - HTML5先行者学习网
<div id="maskLayer" class="mask-layer" style="display:none;"> PX9HTML5中文学习网 - HTML5先行者学习网
<p>图片正在上传中...</p> PX9HTML5中文学习网 - HTML5先行者学习网
</div> PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
JS图片文件验证部分: PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
验证部分为:大小,是否已经选择,文件的类型 三个部分。第一个createObject方法为创建本地图片文件的预览路径,依次验证是否为空,文件类型以及文件大小,不满足条件则一律返回 PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
false,满足以上3个条件后,在dom中生成图片预览,添加img元素,然后利用createObjectURL()方法获取预览路径。 PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
代码: PX9HTML5中文学习网 - HTML5先行者学习网

代码如下: PX9HTML5中文学习网 - HTML5先行者学习网
//获取数据的URL地址 PX9HTML5中文学习网 - HTML5先行者学习网
function createObjectURL(blob) { PX9HTML5中文学习网 - HTML5先行者学习网
if (window.URL) { PX9HTML5中文学习网 - HTML5先行者学习网
return window.URL.createObjectURL(blob); PX9HTML5中文学习网 - HTML5先行者学习网
} else if (window.webkitURL) { PX9HTML5中文学习网 - HTML5先行者学习网
return window.webkitURL.createObjectURL(blob); PX9HTML5中文学习网 - HTML5先行者学习网
} else { PX9HTML5中文学习网 - HTML5先行者学习网
return null; PX9HTML5中文学习网 - HTML5先行者学习网
} PX9HTML5中文学习网 - HTML5先行者学习网
} PX9HTML5中文学习网 - HTML5先行者学习网
//文件检测 PX9HTML5中文学习网 - HTML5先行者学习网
function checkFile() { PX9HTML5中文学习网 - HTML5先行者学习网
//获取文件 PX9HTML5中文学习网 - HTML5先行者学习网
var file = $$("uploadFile").files[0]; PX9HTML5中文学习网 - HTML5先行者学习网
//文件为空判断 PX9HTML5中文学习网 - HTML5先行者学习网
if (file === null || file === undefined) { PX9HTML5中文学习网 - HTML5先行者学习网
alert("请选择您要上传的文件!"); PX9HTML5中文学习网 - HTML5先行者学习网
$$("btnSelect").innerHTML = "单击选择要上传的照片"; PX9HTML5中文学习网 - HTML5先行者学习网
return false; PX9HTML5中文学习网 - HTML5先行者学习网
} PX9HTML5中文学习网 - HTML5先行者学习网
//检测文件类型 PX9HTML5中文学习网 - HTML5先行者学习网
if(file.type.indexOf('image') === -1) { PX9HTML5中文学习网 - HTML5先行者学习网
alert("请选择图片文件!"); PX9HTML5中文学习网 - HTML5先行者学习网
return false; PX9HTML5中文学习网 - HTML5先行者学习网
} PX9HTML5中文学习网 - HTML5先行者学习网
//计算文件大小 PX9HTML5中文学习网 - HTML5先行者学习网
var size = Math.floor(file.size/1024); PX9HTML5中文学习网 - HTML5先行者学习网
if (size > 5000) { PX9HTML5中文学习网 - HTML5先行者学习网
alert("上传文件不得超过5M!"); PX9HTML5中文学习网 - HTML5先行者学习网
return false; PX9HTML5中文学习网 - HTML5先行者学习网
}; PX9HTML5中文学习网 - HTML5先行者学习网
//添加预览图片 PX9HTML5中文学习网 - HTML5先行者学习网
$$("btnSelect").innerHTML = "<img class=/"photo/" src=/""+createObjectURL(file)+"/"/>"; PX9HTML5中文学习网 - HTML5先行者学习网
}; PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
JS Ajax请求部分: PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
说明:第一个监听文件选择更改事件,满足验证条件后则执行预览,第二个事件监听为监听单击btnSelect时弹出窗口的响应,下面的则是确认上传按钮的事件监听,开始发送Ajax请求。此处的createXHR()方法为创建XMLHttpRequest对象,代码我并未贴出,包括addEventListener()方法,这2个部分可以参考其他文章。 PX9HTML5中文学习网 - HTML5先行者学习网

代码如下: PX9HTML5中文学习网 - HTML5先行者学习网
复制代码 PX9HTML5中文学习网 - HTML5先行者学习网
//监听图片URL地址更改 PX9HTML5中文学习网 - HTML5先行者学习网
addEventListener($$("uploadFile"), "change", function() { PX9HTML5中文学习网 - HTML5先行者学习网
checkFile(); PX9HTML5中文学习网 - HTML5先行者学习网
}); PX9HTML5中文学习网 - HTML5先行者学习网
//监听单击文件选择按钮 PX9HTML5中文学习网 - HTML5先行者学习网
addEventListener($$("btnSelect"), "click", function() { PX9HTML5中文学习网 - HTML5先行者学习网
//弹出文件选择框 PX9HTML5中文学习网 - HTML5先行者学习网
$$("uploadFile").click(); PX9HTML5中文学习网 - HTML5先行者学习网
}); PX9HTML5中文学习网 - HTML5先行者学习网
//监听确认上传按钮的点击事件 PX9HTML5中文学习网 - HTML5先行者学习网
addEventListener($$("btnConfirm"), "click", function(e) { PX9HTML5中文学习网 - HTML5先行者学习网
if (checkFile()) { PX9HTML5中文学习网 - HTML5先行者学习网
try { PX9HTML5中文学习网 - HTML5先行者学习网
//执行上传操作var xhr = createXHR(); PX9HTML5中文学习网 - HTML5先行者学习网
$$("maskLayer").style.display = "block"; PX9HTML5中文学习网 - HTML5先行者学习网
xhr.open("post","/uploadPhoto.action", true); PX9HTML5中文学习网 - HTML5先行者学习网
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); PX9HTML5中文学习网 - HTML5先行者学习网
xhr.onreadystatechange = function() { PX9HTML5中文学习网 - HTML5先行者学习网
if (xhr.readyState == 4) { PX9HTML5中文学习网 - HTML5先行者学习网
var flag = xhr.responseText; PX9HTML5中文学习网 - HTML5先行者学习网
if (flag == "success") { PX9HTML5中文学习网 - HTML5先行者学习网
alert("图片上传成功!"); PX9HTML5中文学习网 - HTML5先行者学习网
} else { PX9HTML5中文学习网 - HTML5先行者学习网
alert("图片上传成功!"); PX9HTML5中文学习网 - HTML5先行者学习网
}; PX9HTML5中文学习网 - HTML5先行者学习网
$$("maskLayer").style.display = "none"; PX9HTML5中文学习网 - HTML5先行者学习网
}; PX9HTML5中文学习网 - HTML5先行者学习网
}; PX9HTML5中文学习网 - HTML5先行者学习网
//表单数据 PX9HTML5中文学习网 - HTML5先行者学习网
var fd = new FormData(); PX9HTML5中文学习网 - HTML5先行者学习网
fd.append("myPhoto", $$("uploadFile").files[0]); PX9HTML5中文学习网 - HTML5先行者学习网
//执行发送 PX9HTML5中文学习网 - HTML5先行者学习网
xhr.send(fd); PX9HTML5中文学习网 - HTML5先行者学习网
} catch (e) { PX9HTML5中文学习网 - HTML5先行者学习网
console.log(e); PX9HTML5中文学习网 - HTML5先行者学习网
} PX9HTML5中文学习网 - HTML5先行者学习网
} PX9HTML5中文学习网 - HTML5先行者学习网
}); PX9HTML5中文学习网 - HTML5先行者学习网
PX9HTML5中文学习网 - HTML5先行者学习网
以上则为全部主要代码部分,如果有什么问题可以联系我,欢迎交流。PX9HTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"利用HTML5的新特点实现图片文件异步上传"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/6760.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟教程,提供各类程序编程入门,技巧