获取input file 选中的图片,并在一个div的img里面赋值src实现预览
代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上
【jquery代码】
$(
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();
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;
}
});
});
【html代码】:
<input id=
"file_upload"
type=
"file"
/>
<div class=
"image_container"
>
<img id=
"preview"
width=
"60"
height=
"60"
>
</div>