前端图片预览,上传前预览,兼容IE7、8、9、10、11,FIREFOX,CHROME

转载 2017年06月27日 11:21:46

在现在的Web开发中不可避免的会做一个图片预览的功能,比如在上传图片的情况下,一个很简单的办法就是讲图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图片,实现图片的预览,很明显的在这个过程中两次Web请求,一次发送文件,一次下载文件,到最后这个文件如果在客户端被删除(取消上传,弃用这次的上传),这整个过程都白费了。我们希望能够在图片上传之前就能进行图片的预览,这样就避免了不必要的网络请求和时间等待。下面的内容就围绕这个话题展开。

本地图片预览

IE中的本地图片预览(以本地文件的形式访问)

在IE中能够很方便的实现本地网页的图片预览,IE中的<input type=”file” id=”file_upload”>中的File对象中的value属性,存储的是要上传的文件的完整路径,在IE中只需要将这个完整路径作为一个Image对象的src属性,就能实现在这个Image对象中对这个上传的图片进行预览。

在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的本地图片预览

在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标准中有相关的定义。

服务端图片预览

IE中的本地图片预览(以服务端URL的形式访问)

上面提到的本地预览的方式,在以服务端URL的形式方式下没有预览的效果,需要使用如下滤镜的形式。

function PreviewImg(imgFile){
     var newPreview = document.getElementById("newPreview");
     var imgDiv = document.createElement("div");
     document.body.appendChild(imgDiv);
     imgDiv.style.width = "118px";     imgDiv.style.height = "127px";
     imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
     imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
     newPreview.appendChild(imgDiv);
}

上面的实现可以在IE7、8、9下运行,在IE10、11下无效。h2. Firefox和Chrome的本地图片预览在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标准中有相关的定义。

一个浏览器兼容的实现方案(兼容IE7、8、9、10、11,FIREFOX,CHROME)

基础

  • 在Chrome中,window.URL和window.webkitURL都存在
  • 在Firefox中,仅Window.URL存在
  • 在IE11(Edge),10中仅window.URL存在
  • 在IE7、8、9中不存在window.URL
  • 在IE中能通过FileObject 的value 属性获取文件全路径
  • 在Chrome中无法获取FileObject的全路径,得到的是一个假路径
  • 在Firefox中根本获取不到路径,得到的是一个文件名
  • 在IE7、8、9中无法获取到FileObject的files属性

实现

以前我们总是按照userAgent,通过判断IE,还是Chrome,还是Firefox,或者Safari、Opera等来对应支持代码,现在这种方式可能需要有所调整,File API是Html5的规范特性,因此可以将浏览器大致先分为两个大类,一个是支持HTML5的一类,另一个是不支持的。

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .image_container {
        width: 48px;
        height: 48px;
        position: relative;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script language="javascript">
    $(function() {
        $("#file_upload").change(function() {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#preview");

            if(fileObj && fileObj.files && fileObj.files[0]){
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src',dataURL);
            }else{
                dataURL = $file.val();

                // $img.css("filter",'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="' + dataURL + '")');

                // var imgObj = document.getElementById("preview");
                // imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=/"" + dataURL + "/")";
                // imgObj.style.width = "48px";
                // imgObj.style.height = "48px";

                var imgObj = document.getElementById("preview");
                // 两个坑:
                // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
                // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }
        });
    });
    </script>
</head>
<body>
    <div id="demo">
        <input id="file_upload" type="file" />
        <div class="image_container">
            <img id="preview" width="60" height="60">
        </div>
    </div>
</body>
</html>

前端图片预览,上传前预览,兼容IE7、8、9、10、11,FIREFOX,CHROME

转载地址:http://hao.jser.com/archive/7968/ 在现在的Web开发中不可避免的会做一个图片预览的功能,比如在上传图片的情况下,一个很简单的办法就是讲图片上传...
  • abxn2002
  • abxn2002
  • 2015年10月15日 16:37
  • 2407

JS兼容各个浏览器的本地图片上传即时预览效果

在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,并且读取文件中数据。目前为止,firefox3.6+ chro...
  • mmd1234520
  • mmd1234520
  • 2017年03月30日 15:35
  • 443

菜鸟学JS(一)——上传图片之上传前预览图片

上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出...
  • liushuijinger
  • liushuijinger
  • 2013年03月25日 09:38
  • 14629

前端实现图片上传实时预览的两种方式

前端实现图片上传实时预览
  • u010670151
  • u010670151
  • 2016年05月03日 18:05
  • 5600

兼容各个浏览器的图片上传预览

在Web开发中不可避免的会做一些图片上传的功能,传统的图片上传是将图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图片,实现图片的预览,很明显的在这个过程中两次We...
  • hsany330
  • hsany330
  • 2016年07月14日 17:05
  • 2998

HTML实现图片上传前预览

HTML5 Upload #destination{ filter:progid:DXImageTransform.Microsoft.AlphaImageL...
  • name_liweibin
  • name_liweibin
  • 2014年04月28日 17:56
  • 2346

Internet Explorer 9、10、11兼容性分析处理经验谈

新业务流程平台终于上线了,虽然通过Bootstrap3做了浏览器兼容,并经过测试、验证,但是实用起来还是有些问题,分析及处理过程如下...
  • xiaoyw
  • xiaoyw
  • 2016年01月30日 23:19
  • 2527

图片上传实时预览效果

图片上传实时预览效果
  • qq_28975017
  • qq_28975017
  • 2017年06月23日 00:57
  • 753

html5以及jQuery实现本地图片上传前的预览

html5与jQuery实现预览本地图片
  • YQXLLWY
  • YQXLLWY
  • 2016年09月08日 13:33
  • 8510

SpringMVC批量上传图片,实现上传前图片预览

最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份因为这个是实验性的小代码,就没做...
  • Harry_ZH_Wang
  • Harry_ZH_Wang
  • 2017年07月16日 23:32
  • 600
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端图片预览,上传前预览,兼容IE7、8、9、10、11,FIREFOX,CHROME
举报原因:
原因补充:

(最多只允许输入30个字)