javascript实现的图片预览和上传功能示例【兼容IE 9】


Posted in Javascript onMay 01, 2020

本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考,具体如下:

下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload

对于现代浏览器来说,要实现图片预览非常简单:

1、fileReader.readAsDataURL(file)

2、window.URL.createObjectURL(file)

以上两种方法分别可以得到一个base64和一个blob对象的URL地址,从而实现预览。但是,他们只支持在IE10+,显然这是不够的,如何实现低版本IE浏览器的图片预览呢?代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <script type="text/javascript" language="javascript">
    $('#preview_fake').change(function () {
      previewImg($(this), $('#preview'));

    });
    function previewImg($inputId, $previewId) {
      var inputId = $inputId[0],
        previewId = $previewId[0];
      $previewId.empty();
      if(/msie/.test(navigator.userAgent.toLowerCase())){
        if($.support.version == 6.0){
          $previewId.attr("src",inputId.value);
        }else{
          inputId.select();
          var reallocalpath = document.selection.createRange().text;
          previewId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale',src=\"" + reallocalpath + "\")";
          // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
          previewId.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
        }
      }else {
        $previewId.attr("src",window.URL.createObjectURL(previewFake.files[0]));
      }
    }
 </script>

 </head>
 <body>
   <form id="form1" runat="server">
   <div>
     选择图片:<input type="file" size="20" id='preview_fake'" /> 
   </div>
    <div id="preview" style="width: 300px; height: 300px">
   </div>    
   </form>
 </body>
</html>

这样,我们就能够在IE10- 下预览上传的图片了。

在这里,有必要对几个参数说明一下,以免后人再入坑!

progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)

enabled: 可选。布尔值(Boolean)。设置或检索滤镜是否激活。

  • true:默认值。滤镜激活。
  • false:滤镜被禁止。

sizingMethod:可选。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

  • crop:剪切图片以适应对象尺寸。
  • image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
  • scale:缩放图片以适应对象的尺寸边界。

src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

以上,可以实现低版本IE浏览器的图片预览,但要上传到服务器还需要一番周折。对于单张图片,可以通过<form>表单提交,但对于多张图片,这需要flash技术的支持,实现起来相当麻烦。

这里,楼主推荐一个现有的轮子:webuploader 组件。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript function、指针及内置对象
Feb 19 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
vue使用element-ui按需引入
May 20 Vue.js
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
JS深入学习之数组对象排序操作示例
May 01 #Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 #Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 #Javascript
JavaScript变量Dom对象的所有属性
Apr 30 #Javascript
You might like
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
Flask框架工厂函数用法实例分析
2019/05/25 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
介绍一下#error预处理
2015/09/25 面试题
GWebs公司笔试题
2012/05/04 面试题
村官工作鉴定评语
2014/01/27 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
解决Pytorch中关于model.eval的问题
2021/05/22 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
java实现web实时消息推送的七种方案
2022/07/23 Java/Android