$("#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. tomcat官网

    http://tomcat.jaxmao.org/appdev/index.html 配置 http://www.cnblogs.com/starhu/p/5599773.html

  2. Quartz 2.3 动态添加、修改和删除定时任务

    下面直接上代码: <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>qu ...

  3. 昨晚京东校招笔试,没考一道.net,全考java了

    我在大四之前我都觉得跟着微软走是正确的,这条大腿很粗!但是现在我也开始不那么认为了,现在每天在网上找招聘信息,稍微大点的公司都是招java的,很少招.net的!别说什么你学的好不怕没人招之类的话,大公 ...

  4. stl之list双向链表容器应用基础

    不同于採用线性表顺序存储结构的vector和deque容器.list双向链表中任一位置的元素差值.插入和删除,都具有高效的常数阶算法时间复杂度O(1). 头文件 #include<list> ...

  5. 《深入理解Java虚拟机》笔记3

    垃圾收集算法 (1)标记清除 根据根搜索确定对象是否已死,已死对象标记,然后一起清除. 这个其实不算什么算法,最正常想法应该就是这样.但是,缺点 是效率不高,如果有很多不连续的小对象需要回收,会花好多 ...

  6. NFSv4 mount incorrectly shows all files with ownership as nobody:nobody

    NFSv4 mount incorrectly shows all files with ownership as nobody:nobody   https://access.redhat.com/ ...

  7. 从C转到JAVA学习路之struct与class对比(转)

    转自:http://blog.csdn.net/andywxf01/article/details/53506549 JAVA里最牛B的最基本的就是类,而C语言中的struct也可以定义自己的数据结构 ...

  8. Netty4 ServerBootstrap 初始化channelFactory ReflectiveChannelFactory

    只需要在启动之前传入你需要用的channel类型就可以了. ServerBootstrap初始化channelFactory过程: 最后我们再来看看这个channelFactory的使用场景:

  9. 模式识别之Earley算法入门详讲

    引言:刚学习模式识别时,读Earley算法有些晦涩,可能是自己太笨.看了网上各种资料,还是似懂非懂,后来明白了,是网上的前辈们境界太高,写的最基本的东西还是非常抽象,我都领悟不了,所以决定写个白痴版的 ...

  10. ubuntu cp(copy) command

    e.g. #cp –p –R  /opt/lampp/drv ~/test   Ubuntu_Linux命令:cp(copy)复制文件或目录 功能: 复制文件或目录   www.2cto.com  说 ...