$("#file_upload").change(function () {
var $file = $(this);
var fileObj = $file[];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
if (fileObj && fileObj.files && fileObj.files[]) {
dataURL = windowURL.createObjectURL(fileObj.files[]);
$img.attr('src', dataURL);
} else { dataURL = $file.val();
// $img.css("filter",'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="' + dataURL + '")');
// var imgObj = document.getElementById("preview");
// imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\")";
// imgObj.style.width = "48px";
// imgObj.style.height = "48px";
var imgObj = document.getElementById("preview"); // 两个坑:
// 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
// 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
} }); 前端代码:

    <input id="file_upload" type="file" />
    <div class="image_container" id="previewDIV">
      <img id="preview" width="200" height="200" alt="没有图片">
    </div>

 

IE浏览器上传图片预览兼容(IE 7 8 9 10 11)的更多相关文章

  1. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  3. JavaScrip 原生多文件上传及预览 兼容多浏览器

    JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...

  4. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  5. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  6. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  7. Node.js + gulp 合并静态页模版,文件更新自动热重载。浏览器可预览

    github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...

  8. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  9. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

随机推荐

  1. iOS 读取Json 代码

    保存一下iOS 读取Json的代码,留着以后Copy用,哈哈. NSString* path = [[NSBundle mainBundle] pathForResource: @"Sand ...

  2. ACM--输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符。

    代码如下: #include <stdio.h> main() { char a,b,c,d; int i; scanf("%d",&i); getchar() ...

  3. Java压缩字符串的方法收集

    说明: 1.一般来说要实现压缩,那么返回方式一般是用byte[]数组. 2.研究发现byte[]数组在转成可读的String时,大小会还原回原来的. 3.如果采用压缩之后不可读的String时,互相转 ...

  4. 在MEF中手动导入依赖的模块

    对于简单的场景来讲,在MEF中导入依赖模块非常简单,只要用ImportAttribute标记依赖的成员,MEF模块会自动找到并创建该模块.但有的时候我们依赖的模块是上下文相关的,此时MEF框架的自动组 ...

  5. 在C#中快速查询文件

    相信使用过Everything的人都对其超快的搜索速度印象非常深刻,它的主要原理是通过扫描NTFS磁盘的USN Journal读取的文件列表,而不是磁盘目录,由于USN Journal非常小,因此能实 ...

  6. 重新认识JavaScript里的创建对象

    一.序 面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.ECMA-262把对象定义为“无序属性的集合,其属性可以包含基本值.对象或者函数”. 使用Obje ...

  7. Getting terminal width in C?

    转:http://stackoverflow.com/questions/1022957/getting-terminal-width-in-c 方法一: #include <sys/ioctl ...

  8. mac 切换默认python版本

    https://www.zhihu.com/question/30941329 首先终端的“python”命令会执行/usr/local/bin下的“python”链接,链接相当于win下的快捷方式, ...

  9. 异常值监测的方法 Tukey test

    参考: https://www.zhihu.com/question/38066650

  10. MooseFS分布式文件系统介绍及安装教程详解

    MFS系统由4个部分构成:master.metalogger.chunkserver.client. 1.Master —— mfs的大脑,记录着管理信息,比如:文件大小,存储的位置,份数等,和inn ...