02月14, 2012

本地图片预览功能

起源

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

本文链接:https://75team.com/post/本地图片预览功能.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。