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

2019/6/27 22:11:15

编程Tag： js 图片预览上传预览

本文主要是介绍js图片上传前预览功能（兼容所有浏览器），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

网上找到的一份文件上传前预览的代码,转自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被浏览器去掉了文件路径分割线从而显示不出来

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

这篇关于js图片上传前预览功能（兼容所有浏览器）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章