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入门之基本函数详解
Oct 21 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
小程序实现投票进度条
2019/11/20 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python实现实时监控文件的方法
2016/08/26 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
最新离婚协议书范本
2014/08/19 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
Nginx配置使用详解
2022/07/07 Servers