当前位置：首页 > 资讯 > 技术文档

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

时间：2021-03-18 08:12 编辑：来源：阅读：
扫一扫，手机访问

摘要：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被浏览器去掉了文件路径分割线从而显示不出来以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：javascript生成大小写字母
下一篇：JS模式之单例模式基本用法

资讯排行榜
更多>>