前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome

最新推荐文章于 2025-12-03 18:49:33 发布

转载最新推荐文章于 2025-12-03 18:49:33 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dhsz/p/6437700.html

文章标签：

#前端 #ViewUI

在现在的Web开发中不可避免的会做一个图片预览的功能，

比如在上传图片的情况下，一个很简单的办法就是讲图片上传至服务器之后，再将文件的URL返回回来，然后异步通过这个URL加载刚刚上传的图片，实现图片的预览，

很明显的在这个过程中两次Web请求，一次发送文件，一次下载文件，到最后这个文件如果在客户端被删除（取消上传，弃用这次的上传），

这整个过程都白费了。我们希望能够在图片上传之前就能进行图片的预览，这样就避免了不必要的网络请求和时间等待。

在IE中有如下方式

 
         var 
         url;
        
         var 
         fileobj = document.getElementById(sourceId);
        
         fileobj.select();
        
         url = document.selection.createRange().text;

或者

 
         var 
         url = document.getElementById(sourceId).value;

两种方式获取到的路径直接给img src 可以进行本地图片的预览（可以加上file:///协议，效果一样），这两种方式对IE7、8、9、10、11下有效。

在Firefox和Chrome中使用如下方式:

 
         var 
         url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])

将得到的值给img src 进行图片预览。可能还会看到如下的方式：var url = obj.files.item(0).getAsDataURL();
这种使用Firefox File对象的getAsDataURL的方式，已经在Firefox 7.0以后弃用，Firefox DOM File，可能原因是在HTML5标准中有相关的定义。

链接

转载于:https://www.cnblogs.com/dhsz/p/6437700.html