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 相关文章推荐
图片Slider 带左右按钮的js示例
Aug 30 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 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
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
原生js生成图片验证码
2020/10/11 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
python操作gitlab API过程解析
2019/12/27 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
运动会广播稿300字
2014/01/10 职场文书
美术国培研修感言
2014/02/12 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
森林病虫害防治方案
2014/06/02 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
奖励通知
2015/04/22 职场文书
食堂卫生管理制度
2015/08/04 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电