参考这个: 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>