参考这个: http://www.cnblogs.com/rubylouvre/p/4597344.html
稍微修改一下:
<script language="javascript" type="text/javascript">
function Preview(pointer,ImgId) {
console.log(pointer);
var $file = $(pointer);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#" + ImgId);
if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
} else {
dataURL = $file.val();
var imgObj = $img;
// 两个坑:
// 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
// 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
}
$(function () {
$("#BorrowerPhoto").change(function () { Preview(this,"BorrowerPhotoPreview") });
$("#Borrower1Photo").change(function () { Preview(this,"Borrower1PhotoPreview") });
});
</script>
<input type="file" id="BorrowerPhoto" name="BorrowerPhoto" style="display:none" accept="image/*"/> <a href="#"onclick="$('#BorrowerPhoto').click();"><img id="BorrowerPhotoPreview" src="~/images/idcard.png" style="200px;" /></a>
<input type="file" id="Borrower1Photo" name="Borrower1Photo" style="display:none" accept="image/*" /> <a href="#" onclick="$('#Borrower1Photo').click();"><img id="Borrower1PhotoPreview" src="~/images/idcard.png" style="200px;" /></a>