zoukankan      html  css  js  c++  java
  • 前端图片预览,上传前预览显示

    参考这个: 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>
  • 相关阅读:
    redis 3 通用指令
    查看表索引
    truncate的用法
    Java(0)_ 安装jdk
    Java(9)_ 集合(3)
    Java(10)_File&递归&字节流
    Java(8)_ 集合(2)
    Appium+python的单元测试框架unittest(3)——discover
    Appium+python的单元测试框架unittest(2)——fixtures
    爬楼梯
  • 原文地址:https://www.cnblogs.com/zitjubiz/p/upload_image_preview_javascript.html
Copyright © 2011-2022 走看看