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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值