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