IE浏览器上传图片预览兼容(IE 7 8 9 10 11)
$("#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)的更多相关文章
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- JavaScrip 原生多文件上传及预览 兼容多浏览器
JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- Node.js + gulp 合并静态页模版,文件更新自动热重载。浏览器可预览
github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
随机推荐
- linux 处理两个文件的并集,交集,计数
1. 取出两个文件的并集(重复的行只保留一份) cat file1 file2 | sort | uniq 2. 取出两个文件的交集(只留下同时存在于两个文件中的文件) cat file1 file2 ...
- iOS计算富文本(NSMutableAttributedString)高度
有时候开发中我们为了样式好看, 需要对文本设置富文本属性, 设置完后那么怎样计算其高度呢, 很简单, 方法如下: - (NSInteger)hideLabelLayoutHeight:(NSStrin ...
- sqlserver 获取系统用户表结构信息
SELECT (case when a.colorder=1 then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名, (case when ...
- 怎样在 Mac 上打开 ~_Library 文件夹
怎样在 Mac 上打开 ~_Library 文件夹 听语音 浏览:17674 | 更新:2015-05-20 10:51 | 标签:文件夹 Mac 上的~/Library 文件夹是默认为隐藏的.因为苹 ...
- 你真的了解try{ return }finally{}中的return?(转载)
发现一篇有意思的博文,分享一下 谁能给我我解释一下这段程序的结果为什么是:2.而不是:3 代码如下: class Test { public int aaa() { int x = 1; try { ...
- python 输出所有大小写字母, range()以及列表切片
所以在写的时候,只要把它们的ASCII列出,并转化成字符型chr 即可. print [chr(i) for i in range(65,91)]#所有大写字母 print [chr(i) for i ...
- pwn2own
Pwn2Own是全球最著名的黑客大赛之一,由美国五角大楼入侵防护系统供应商TippingPoint的DVLabs赞助,今年已经是第六届. 1比赛规则 参赛黑客们的目标是4大主流网页浏览器——IE.Fi ...
- artDialog弹出框使用
配置参数 名称 类型 默认值 描述 内容 title String '消息' 标题内容 content String 'loading..' 消息内容.1.如果传入的是HTMLElement类型,如果 ...
- 【机器学习 & 数据挖掘 通俗介绍】
如何向小白介绍何谓机器学习和数据挖掘?买回芒果他就懂了 JasonZheng • 2013-01-07 22:18 买芒果 嘴馋的你想吃芒果了,于是你走到水果摊,挑了几个让老板过过秤,然后你再根据 ...
- Windows 10系统专业精简
第1页:捆绑应用一键卸载 随着微软彻底放弃win7的更新,win8的弱势,新一代的win10系统则成为了微软着力打造的王牌系统. 作为微软最新的王牌产品,win10系统从功能到外观都有着超过前代产品的 ...