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

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

猜你喜欢

转载自www.cnblogs.com/zitjubiz/p/upload_image_preview_javascript.html