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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
js跳转页面方法总结
Jan 29 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
微信小程序实现选项卡滑动切换
Oct 22 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python中实现switch功能实例解析
2018/01/11 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Django配置跨域并开发测试接口
2020/11/04 Python
写自荐信三大法宝
2014/01/24 职场文书
党支部承诺书范文
2014/03/28 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
夫妻吵架保证书
2015/05/08 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书