主页 / 网络编程 /

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

网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要为大家详细介绍了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被浏览器去掉了文件路径分割线从而显示不出来 

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

上一篇：浅析Javascript ES6新增值比较函数Object.is 下一篇：聊一聊jQuery插件uploadify使用方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by