日期:2014-05-16  浏览次数:20606 次

js 图片预览 (不经过后台交互)
最近 在搞图片上传,上传前总是要预览下吧,考虑经过后台交互后将临时文件下载预览又未免太麻烦,自然就想写个纯前台的js预览,大概查询了下资料最后得出如下结论

测试地址 :[url]http://zucou.com/preview/ [/url] 


1 ie 6版本下的 直接img src  给予 file.value  即可显示图片

2 ie 7++  由于ms 安全性要求 不支持 直接显示  所以 我们采用 css中的 滤镜 做一个 遮罩

3 firefox 4 以下的版本 支持  getAsDataURL () 方法 这个方法 将 img的全路径 读取出来 然后 放到 img 的src 下 

4 firefox 4++ 后 也是考虑安全问题 将 getAsDataURL 方法 删除了(安全永远是问题) 所以 新版浏览器 在通常的 js 技术下 都不支持 预览 很多就选择了 上传服务器

5 chrome 的横空出世 未曾给我们带来 js 对 文件(尤其图片)的美好支持,其实如果js 读文件很好支持的话 确实太危险了。。。

6 由于 ff 4++ 和chorme 等都支持 html5 那么 自然 就支持 html5中的 fileReader 对象了 ,此对象 有方法 可以将 图片读取并且 进行 base64编码 那么自然 就ok了

7 增加图片格式验证 以及根据需要 等比例压缩图片