前端图片预览，上传前预览【兼容IE七、八、九、十、11，Firefox，Chrome】

时间 2019-11-06

标签前端图片预览上传兼容 firefox chrome 栏目 Firefox 繁體版

原文原文链接

在如今的Web开发中不可避免的会作一个图片预览的功能，好比在上传图片的状况下，一个很简单的办法就是讲图片上传至服务器以后，再将文件的URL返回回来，而后异步经过这个URL加载刚刚上传的图片，实现图片的预览，很明显的在这个过程当中两次Web请求，一次发送文件，一次下载文件，到最后这个文件若是在客户端被删除（取消上传，弃用此次的上传），这整个过程都白费了。咱们但愿可以在图片上传以前就能进行图片的预览，这样就避免了没必要要的网络请求和时间等待。下面的内容就围绕这个话题展开。javascript

本地图片预览css

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

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

在IE中有以下方式:java

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

或者jquery

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

两种方式获取到的路径直接给img src 能够进行本地图片的预览（能够加上file:///协议，效果同样），这两种方式对IE七、八、九、十、11下有效。web

Firefox和Chrome的本地图片预览浏览器

在Firefox和Chrome中使用以下方式:服务器

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

将获得的值给img src 进行图片预览。可能还会看到以下的方式：var url = obj.files.item(0).getAsDataURL();app

这种使用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);
}

上面的实现能够在IE七、八、9下运行，在IE十、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标准中有相关的定义。

基础

在Chrome中，window.URL和window.webkitURL都存在
在Firefox中，仅Window.URL存在
在IE11（Edge），10中仅window.URL存在
在IE七、八、9中不存在window.URL
在IE中能经过FileObject 的value 属性获取文件全路径
在Chrome中没法获取FileObject的全路径，获得的是一个假路径
在Firefox中根本获取不到路径，获得的是一个文件名
在IE七、八、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");
                // 两个坑:
                // 一、在设置filter属性时，元素必须已经存在在DOM树中，动态建立的Node，也须要在设置属性前加入到DOM中，先设置属性在加入，无效；
                // 二、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>