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 增加图片格式验证 以及根据需要 等比例压缩图片