前端图片预览，上传前预览显示

参考这个: 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="width: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="width:200px;" /></a>