js图片上传前预览功能（兼容所有浏览器）

2019-11-20 09:09:35

字体：大中小

来源：转载

供稿：网友

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览（兼容所有浏览器）

<!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  <style type="text/css">  #preview,  .img,  img {    width: 200px;    height: 200px;  }    #preview {    border: 1px solid #000;  }  </style></head><body>  <div id="preview"></div>  <input type="file" onchange="preview(this)" />  <script type="text/javascript">  function preview(file) {    var prevDiv = document.getElementById('preview');    if (file.files && file.files[0]) {      var reader = new FileReader();      reader.onload = function(evt) {        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';      }      reader.readAsDataURL(file.files[0]);    } else {      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=/'' + file.value + '/'"></div>';    }  }  </script></body></html>

实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅析Javascript ES6新增值比较函数Object.is

下一篇：聊一聊jQuery插件uploadify使用方法