前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome
2016-04-28 23:21
711 查看
原文地址跳转
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo">
<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" width="60" height="60">
</div>
</div>
</body>
<script src="http://www.hui12.com/lib/jquery-1.9.1.min.js"></script>
<script language="javascript">
$(function() {
$("#file_upload").change(function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
if(fileObj && fileObj.files && fileObj.files[0]){
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$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;
}
});
});
</script>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo">
<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" width="60" height="60">
</div>
</div>
</body>
<script src="http://www.hui12.com/lib/jquery-1.9.1.min.js"></script>
<script language="javascript">
$(function() {
$("#file_upload").change(function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
if(fileObj && fileObj.files && fileObj.files[0]){
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$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;
}
});
});
</script>
</html>
相关文章推荐
- 不同人员对性能的关注点与web前端性能测试概念
- String StringBuffer StringBulider 区别
- jQuery 获取标签在table 中的行和列
- jQuery获取 radio 选中后的文字 ,获取
- 文章标题
- JavaScript中的继承之寄生式继承
- nodejs开发指南读后感
- 【BZOJ3940】[Usaco2015 Feb]Censoring【AC自动机 / KMP】
- 【BZOJ3942】[Usaco2015 Feb]Censoring【AC自动机 / KMP】
- JavaScript知识总结—cookie及其应用
- bootstrap 改变模态弹出框的样式
- HBuilder支持jquery、zepto、angular、ext、dojo 等js框架的提示吗
- jQuery学习小问题记录
- spring mvc ajax分页 bootstrap-paginator
- 知问前端——概述及jQuery UI
- JavaScript算法
- javascript中利用柯里化函数实现bind方法
- 01-css
- js检测IE浏览器版本
- IE10及以上CSS滤镜失效(偶然发现)