下载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 组件。

【javascrpt】——图片预览和上传，兼容IE 9-的更多相关文章

  1. webform的原生操作图片预览和上传

    1.使用input标签进行图片操作,input的标签有一个accept属性,accept 属性只能与 <input type="file"> 配合使用.它规定能够通过文 ...

  2. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  3. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  4. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  5. H5实现多图片预览上传，可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  6. jquery.uploadView 实现图片预览上传

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...

  7. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  9. 浅谈简单实现file控件的图片预览，裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

随机推荐

  1. 2017面向对象程序设计（Java）第六周学习总结

    转眼间,2017年的法定节日已经休完,我们的java学习也已经进行了六周.下面,我将对上个礼拜的学习情况进行总结. 首先,是学习态度问题.虽然同学们已经从家或者各个旅游景点回来,但是心还是没回来.有同 ...

  2. clr相关名词

    程序集:一个或多个类型定义文件和资源文件的集合 Native Code(本机代码): 已被编译为特定于处理器的机器码的代码. 本地代码(native code)是计算机编程(代码),编译用来运行一个特 ...

  3. acoj-1735 输油管道 【中位数】

    题目链接:http://acdream.info/problem?pid=1735 输油管道 Time Limit: 2000/1000MS (Java/Others) Memory Limit: 2 ...

  4. react-native 生命周期

    一.前言 问: 什么是组件的生命周期? 组件的生命周期中都包含哪些方法,各有什么作用? 生命周期的方法都在什么时候调用? 生命周期: 顾名思义,一个主体从出生到死亡的整个过程 学习组件(React的基 ...

  5. unity3d开发实战《啪啪三国》技术详解！

     去年11月,上海火溶网络CEO王伟峰以其第一款3d手游产品<啪啪三国>为例,着重讲解了unity3D手机网游开发的经验,其中涉及了团队组成.人员要求.常见的unity3d开发遇到的坑及解 ...

  6. 关于在线文本编辑器防XSS注入攻击问题

    跨站脚本攻击,又称XSS代码攻击,也是一种常见的脚本注入攻击.例如在下面的界面上,很多输入框是可以随意输入内容的,特别是一些文本编辑框里面,可以输入例如<script>alert('这是一 ...

  7. C语言中的序列点和副作用

    参考: http://www.2cto.com/kf/201210/161225.html

  8. Mockplus组件样式库一键解决风格复用

    在Mockplus3.3版本中,新增了组件样式库,可以快速复用组件风格,同时可以将组件风格保存到库中. 官网地址:https://www.mockplus.cn 1. 保存样式 选中组件,设置好该组件 ...

  9. AngularJS-$scope类

    一.$scope的作用 用来在controller和view中进行数据.事件的传递 二.$scope和$rootscope的区别 1.$rootscope根作用域 2.$rootscope可以实现多个 ...

  10. VMware安装Ubuntu

    1. VMware Ubuntu安装详细过程:http://blog.csdn.net/u013142781/article/details/50529030 2. 怎样在VMware虚拟机中使用安装 ...