也玩图片预览

最新推荐文章于 2025-11-08 09:46:39 发布

原创最新推荐文章于 2025-11-08 09:46:39 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#url #图片 #解决方案 #server #管理

javascript 同时被 3 个专栏收录

79 篇文章

订阅专栏

HTML5

72 篇文章

订阅专栏

css

61 篇文章

订阅专栏

在做图片管理或者人员信息管理（比如说头像上传）时，总会涉及到图片上传和图片预览的问题，通常会有两种解决方案做图片上传预览，第一种方案是先将图片“偷偷滴”传到server，然后server返回图片的url，在客户端的img标签中将src属性设置为刚返回的url。这种方式显然消耗了额外的带宽，因为包含了上传和下载过程。第二种方案是上传前就进行预览，下面我们看下解决方案：
IE下图片浏览处理
IE中的选择文件中的File对象中的value属性，存储的是要上传的文件的完整路径，在IE中只需要将这个完整路径作为一个Image对象的src属性，就能实现在这个Image对象中对这个上传的图片进行预览

var url = document.getElementById("file_preview").value;
img.src = url;

这种写法只支持IE>6 并且 IE<11,如果是IE6该怎么处理呢，我们可以将img包括在div中对该div通过设置滤镜实现

var imgDiv = document.createElement("div");
document.body.appendChild(imgDiv); 
var image=new Image(); 
 image.src=imgFile.value;
 imgDiv.style.width = image.width;
 imgDiv.style.height = image.height;
 imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
 imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
 xxx.appendChild(imgDiv);//插入到页面元素中

imgFile 为选中的文件对象，progid:DXImageTransform.Microsoft.AlphaImageLoader 为IE filter的一种，作用是将图片进行透明处理（firefox 和IE6以上的浏览器已经支持透明处理），该滤镜有几个属性：

enabled :　可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true :　默认值。滤镜激活。 false :　滤镜被禁止。

sizingMethod :　可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop :　剪切图片以适应对象尺寸。
image :　默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale :　缩放图片以适应对象的尺寸边界。

src :　必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

firefox和chrome下的图片预览：
在这两个浏览器下，我们通常使用如下方式：

var url = window.URL.createObjectURL(document.getElementById(“sourceId”).files[0])
img.src = url;

在个别的项目中你可以还会看到如下的形式：

 var url = instanceOfFile.getAsDataURL();

这个是非标准的firefox实现，在7.0以后的版本中已经弃用，详细描述可以戳这里：https://developer.mozilla.org/en-US/docs/Web/API/File/getAsDataURL

作为创建URL的方式，我们再普及一下：

在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属性

有了上面的基础，我们可能需要将创建URL的方法扁平化，统一化

<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="http://code.jquery.com/jquery-1.11.3.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>