HTML5文件API之图片预览
图片上传在当今的Web应用中是一个非常常用的功能,如果不需要在上传前进行图片预览则可以简单的使用HTML+Javascript来实现,但如果一定要在上传之前提供图片预览功能则需要求助于Flash来实现。不过,随着HTML5 File API的诞生这一状况终于有了改观,本文将介绍如何使用HTML5 File API快速的实现图片预览功能。
浏览器支持情况
本文实现的功能在以下浏览器中经过测试:IE8、Firefox3.6、Chrome6.0、Opera10、Safari4。其中Firefox3.6与Chrome6.0已经实现了该标准(虽然并没有完全遵循标准),其他浏览器均未实现。关于具体的兼容性问题,后文将详细说明。
文件选择与获取
如今最常见的文件选择方式是使用File Input元素,用户通过该元素打开本机文件对话框寻找并选择相应的文件,不过随着HTML5 Drag Drop API的出现又增加了一种新的方式-用户可以直接将本机的文件拖拽到Web页面中。
方式一 <input type=”file”>
以下是代码片段: <input id="fileSel" type="file" onchange="handleFiles(this.files)"> <script type="text/javascript"> //获取用户选择的文件 function handleFiles(files){ //遍历files并处理 } </script> |
方式二 Drag & Drop
以下是代码片段: </script> <div id="fileDropRegion">将文件拖拽到此</div> <script type="text/javascript"> //获取用户选择的文件 var dr = document.getElementById(’fileDropRegion’); dr.addEventListener("drop",function(e){ e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; //获取文件数组 var files = dt.files; handleFiles(files); },false); function handleFiles(files){ //遍历files并处理 } </script> |
文件读入与展示
通过上文中的方法我们获取到了用户选择的文件数组,接下来就该操作其中的每一个文件了,如HTML5 File API描述的那样,每个文件对象应该包含以下属性:
以下是引用片段: readonly attribute DOMString name; //The name of the file. readonly attribute unsigned long long size; //Represents the size of the Blob object in bytes. readonly attribute DOMString type; //The media type of the Blob readonly attribute DOMString url; //The URL representing the Blob object. |
如果是上传图片则可以通过type属性来进行图片格式过滤,并可以通过size属性来控制图片大小。对于这些属性,Firefox与Chrome的实现情况是出奇的一致,均只支持name、size和type属性。
以上4个读取文件的方式均是异步的,需要注册监听对应的事件来处理文件,而与图片预览相关的方法是readAsDataURL,该方法会将图片文件内容转换成dataURI的格式,而该格式是可以直接在浏览器中显示的。
以下是代码片段: function handleFiles(files){ //遍历files并处理 for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /image.*/; //通过type属性进行图片格式过滤 if (!file.type.match(imageType)) { continue; } //读入文件 var reader = new FileReader(); reader.onload = function(e){ //e.target.result返回的即是图片的dataURI格式的内容 var imgData = e.target.result, img = document.createElement(’img’); img.src = imgData; //展示img } reader.readAsDataURL(file); } } </script> |
通过以上几步便简单的实现了图片的上传前的预览功能,具体的效果请在Firefox或Chrome下打开此页面。
参考资料
Using files from web applications
建议继续学习:
- HTML5 离线缓存-manifest简介 (阅读:16110)
- 图片动态局部毛玻璃模糊效果的实现 (阅读:13591)
- 好的API设计 (阅读:11260)
- 淘宝图片存储架构 (阅读:9836)
- 解决IE6从Nginx服务器下载图片不Cache的Bug (阅读:7097)
- When we`re only No.2, we try harder之聊天表情设计小探讨 (阅读:6507)
- 精于图片处理的10款jQuery插件 (阅读:6219)
- 面向移动设备的HTML5开发框架梳理 (阅读:5929)
- phpThumb:强大的缩微图类 (阅读:5460)
- Google短网址的API (阅读:5141)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Miller 来源: Miller
- 标签: API HTML5 图片
- 发布时间:2010-07-20 23:14:35
- [55] Oracle MTS模式下 进程地址与会话信
- [55] IOS安全–浅谈关于IOS加固的几种方法
- [54] 如何拿下简短的域名
- [53] android 开发入门
- [52] Go Reflect 性能
- [52] 图书馆的世界纪录
- [49] 读书笔记-壹百度:百度十年千倍的29条法则
- [48] 【社会化设计】自我(self)部分――欢迎区
- [38] 程序员技术练级攻略
- [32] 视觉调整-设计师 vs. 逻辑