足球游戏_中国足彩网¥体育资讯$

js图片上传前预览功能(兼容所有浏览器)
来源:易贤网 阅读:876 次 日期:2016-08-30 14:28:52
温馨提示:易贤网小编为您整理了“js图片上传前预览功能(兼容所有浏览器)”,方便广大网友查阅!

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

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

  <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被浏览器去掉了文件路径分割线从而显示不出来 

以上就是本文的全部内容,希望对大家的学习有所帮助

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标