三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

用File API做图片预览功能
作者:Neoxone    发表时间: 2012年11月28号,星期三     阅读:8,347 次

图片上传预览应该是个蛮实用的功能。下面利用html5 的 Files API实现如下:

关于Files API本身不做详述,可另行参考:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

HTML5的 file input标签支持multipleaccept ,前一个属性可控制多文件选择,后一个控制上传的文件类型。
files对象可不是单个的file对象,单个的file对象包含其中,而单个的file主要包含如下key/value:

name: “F_5cac2.gif”
size: 3589202
type: “image/gif”
在firefox下,还开放了一项 mozFullPath ,是文件完整的本地路径。(不好意思,这个属性值是取不出来的,只有火狐浏览器本身能识别)

另外,做了一下ie和opera的兼容。
ie下面没有直接设置img的src属性,而采用了AlphaImageLoader滤镜,这也是为了兼容考虑,我记得以前ie7是无法获取文件的完整路径的,这个待考,如果能获取完整路径,直接设置src即可。

而opera(目前为Presto/2.12.388,Version/12.11)因为不支持createObjectURL/revokeObjectURL方法,参见:http://www.opera.com/docs/specs/presto2.12/apis/#file
所以我们就用了FileReader对象的readAsDataURL()方法将 blob(binary large object)数据转换为一个Data URL(参见http://www.opera.com/docs/specs/presto2.11/file/#blob),放入img标签进行显示。值得一提的是,使用FileReader的方式同样适用于Firefox,webkit的浏览器。

标签: , ,

2 条评论 发表在“用File API做图片预览功能”上

  1. annaclio 说:

    感谢分享

    回复

  2. [...] http://www.cssass.com/blog/index.php/2012/1306.html 本条目发布于 2012 年 12 月 17 日。属于 web标准 分类。作者是 admin。 0 次浏览 document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) [...]

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(