下载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. Redis 键空间通知

    [Redis 键空间通知] 键空间通知使得客户端可以通过订阅频道或模式, 来接收那些以某种方式改动了 Redis 数据集的事件. 以下是一些键空间通知发送的事件的例子: 所有修改键的命令. 所有接收到 ...

  2. 79. Word Search (Array; DFS,Back-Track)

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  3. Android Studio连接真机

    -------------siwuxie95         1.首先创建一个项目:HelloWorld,点击app,出现下拉选项,选择Edit Configurations             ...

  4. POJ1163 数学三角求最大路径

    描述:输入,行数,之后接数据,第一行一个数据,之后每行加一.5 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 思路:简单动态规划问题.dp[i][j]定义为到这个数为止(包括这个数)的最 ...

  5. Linux 启动和关闭自定义命令

    首先是启动命令 [lambert@lambert ~]$ vim startup.sh #!/bin/bash nohup XXXXXX >/home/lambert/>& &am ...

  6. [SoapUI] 通过Groovy Script获取当前运行的是哪套Environment

    log.info testRunner.testCase.testSuite.project.getActiveEnvironment().getName()

  7. Java程序设计11——GUI设计与事件处理B

    4 Java事件模型的流程 为了使图形界面能够接收用户的操作,必须给各个组件加上事件处理机制. 在事件处理的过程中,主要涉及3类对象: 1.Event Source(事件源):事件发生的场所,通常就是 ...

  8. 如何用Python实现常见机器学习算法-2

    二.逻辑回归 1.代价函数 可以将上式综合起来为: 其中: 为什么不用线性回归的代价函数表示呢?因为线性回归的代价函数可能是非凸的,对于分类问题,使用梯度下降很难得到最小值,上面的代价函数是凸函数的图 ...

  9. 安装Android SDK Manager的“Failed to fetch refused”问题解决方法

    安装Android SDK Manager的"Failed to fetch refused"问题解决方法 一见 2014/11/11 问题现象: 步骤一:修改hosts文件(wi ...

  10. Spring配置bean的方法(工厂方法和Factorybean)

    通过工厂方法配置bean 通过调用静态工厂方法创建bean 通过静态工厂方法创建bean是将对象创建的过程封装到静态方法中.当客户端需要对象时,只需要简单地调用静态方法,而不关心创建对象的细节. 要声 ...