起源
IE6时代,我们使用Javascript做上传前图片预览功能、提示用户上传的图片是否超过大小限制。
因为:
- JS能取到完整的路径
- <img> 指定本地图片路径,可以显示
- Image对象加载本地图片 fileSize 属性读出图片字节大小
示例代码:
<input type="file" onChange="previewImg(this.value)">
<img id="preview">
<script>
function previewImg(src) {
document.getElementById('preview').src = src;
var img = new Image();
img.onload = function(){
alert(this.fileSize);
};
img.onerror = function(){
alert('onerror')
};
img.src = src;
}
</script>
随着各种现代浏览器的出现,这个方法不行了。
是怎么不行的呢?各浏览器支持到什么情况?不需要兼容性时是否是否还可以使用该方法?
现状
| IE6 | IE7、8、9 | Firefox、Chrome |
获取文件全路径 | file.value | file.value (有的说取不完整,我测试取完整了,并且还可以用 document.selection.createRange().text) | 传统方式无法取到完整路径 (网上也有些办法,取到Firefox的,但我测试新版本里已经不行了) |
显示本地图片 | img标签 | img标签禁用本地图片,但AlphaImageLoader还可用 | 取不到完整路径,该步骤无意义 |
经过测试,IE系列的目前来看,还是可以做到本地预览的功能。其它浏览器通过这个方式就不行了。
替代方案
1、Flash
Flash Player 覆盖率相当高,10.0 版本,新增了功能,打开本地文件数据。 可以做到本地图片预览,具体实现看这里:
http://www.klstudio.com/post/182.html
2、HTML5
上图,不支持的浏览器却是支持HTML5的现代浏览器, 通过HTML5新特性 FileReader, 也能达到本地图片预览。 两种方式互用,实现兼容性问题。 具体实现看奇舞团谢朝宁博客:
http://blog.sina.com.cn/s/blog_686c36610100wnw1.html
原文地址