本地图片预览功能

起源

IE6时代，我们使用Javascript做上传前图片预览功能、提示用户上传的图片是否超过大小限制。

因为：

1.   JS能取到完整的路径

2. <img> 指定本地图片路径，可以显示
3. 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