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

2023年10月27日 163次阅读 来源: IT智云编程

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

基础

  • 在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``>

这里推荐一下我的前端学习交流群：784783012，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

点击：加入

    原文作者：IT智云编程
    原文地址: https://www.jianshu.com/p/20c84f620c6e
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞