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中字符串的定义示例代码
Dec 19 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
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
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
幼儿园英语教学反思
2014/01/30 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
应届生求职信
2014/05/31 职场文书
暑期培训班策划方案
2014/08/26 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang