$("#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. Entity Framework part2

    EF原理以XML方式打开edmx文件,这个XML的文件主要包含两大部分:Runtime是类模型部分,Designer是VS中的图形界面重点讨论的是Runtime部分,又分为三大部分:SSDL数据模型部 ...

  2. iOS 文字渐变色

    // 创建UILabel UILabel *label = [[UILabel alloc] init]; label.text = @"我是渐变的label"; [label s ...

  3. Maven设置snapshot无法在远程仓库下载的问题解决

    检查步骤如下: 1.检查nexus是否纳入public版本中: 2.配置中是否启用snapshots功能.以下方法两种设置都可以,任选一个即可. 一种是在项目pom.xml使用: <reposi ...

  4. Word中对象显示不完整

    选中上下文字后,右键没有段落,如果是图片的话是有的,那么我们可以点击菜单栏中段落的右下三角,在那设置单倍行距.

  5. ios滚动UIScrollView的setContentOffset方法

    在UIScrollView,setContentOffset方法的功能是跳转到你指定内容的坐标,[self.scroview setContentOffset:CGPointMake(0, 50) a ...

  6. ios 如何获得系统时间和日期

    iphone 如何获得系统时间和日期 代码如下: #import <time.h> 1.获得当前的系统时间和日期 //获得系统时间 NSDate *  senddate=[NSDate d ...

  7. Mac的SourceTree安装时如何注册?

    目前安装SourceTree的过程中是必须注册的,但是注册又是国外的,因此需要FQ.但是未注册成功,是没有办法设置SourceTree的代理的,虽然不知道SourceTree有没有设置代理的功能,解决 ...

  8. codeforces round #264(div2)

    A题   我仅仅想说题意非常坑,一不小心就会wa,哎,不机智的我居然在最后判题的过程中错了,少加一个推断语句. 错的值了,你说呢? #include<map> #include<cm ...

  9. sublime 插件cssrem安装及配置

    CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...

  10. Vue组件基础知识总结

    组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...