专栏首页技术博文JavaScript 图片的上传前预览(兼容所有浏览器)

JavaScript 图片的上传前预览(兼容所有浏览器)

功能描述

通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+、Chrome、Firefox)。

实现要点

● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。

● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。

 1  <!DOCTYPE html>
 2  <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 5 <style type="text/css">
 6  #preview, .img, img
 7  {
 8  width:200px;
 9  height:200px;
10  }
11  #preview
12  {
13 border:1px solid #000;
14 }
15  </style>
16  </head>
17 <body>
18  <div id="preview"></div>
19 <input type="file" onchange="preview(this)" />
20  <script type="text/javascript">  
21  function preview(file)
22  {
23  var prevDiv = document.getElementById('preview');
24  if (file.files && file.files[0])
25  {
26  var reader = new FileReader();
27  reader.onload = function(evt){
28  prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
29 }  
30  reader.readAsDataURL(file.files[0]);
31 }
32  else  
33  {
34  prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
35  }
36  }
37  </script>
38  </body>
39  </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • php 实现文件下载

    1、php下载原理图 ? 2、文件下载源码: 1 <?php 2 $file_name="umiwi.apk";//需要下载的文件 3 $file_dir...

    joshua317
  • ssh证书登录

    ssh有密码登录和证书登录,初学者都喜欢用密码登录,甚至是root账户登录,密码是123456。但是在实际工作中,尤其是互联网公司,基本都是证书登录的。内网的机...

    joshua317
  • Linux添加/删除用户和用户组

    本文总结了Linux添加或者删除用户和用户组时常用的一些命令和参数。 1、建用户: adduser phpq                          ...

    joshua317
  • JavaScript快速实现手动轮播

    这个实现起来还是非常简单的,实现方法也多种多样。今天给大家介绍一个非常巧妙的方法,利用JS中的this。

    ZackSock
  • 【开源游戏/节日】蛋旦很疯狂(新年/元旦专用)

    用户5997198
  • 电商项目(中)

    感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

    达达前端
  • React 中高阶函数与高阶组件(上)

    React 中最大的一亮点,就是组件化开发模式,而编写 React 组件,对于无状态的组件,我们可以用函数式组件编写,而复杂的组件(聪明组件/外层组件)可以用类...

    itclanCoder
  • web页面和小程序页面实现瀑布流效果

      2、小程序实现瀑布流,大致流程差不多。只不过小程序的图片的宽高度的获取没有web页面那么方便。

    tandaxia
  • 无缝循环滚动图片的JS代码

    无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试。

    小小鱼儿小小林
  • 使用Python Dash,主题分析和Reddit Praw API自动生成常见问题解答

    同行评审或论坛的最大问题是网站上大量可用信息。很多时候对与他们一直在搜索的内容无关的评论数量感到沮丧。以Reddit为例,主页上有很多帖子。所有的信息杂乱都很难...

    代码医生工作室

扫码关注云+社区

领取腾讯云代金券