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>
  • 相关阅读:
    什么是动态链接库
    <<TCP/IP高效编程>>读书笔记
    C++ 函数
    我的vim配置
    FastReport4.6程序员手册_翻译
    DUnit研究初步
    ADO BUG之'无法为更新定位行....' 解决之道
    极限编程的集成测试工具Dunit
    总结
    项目管理检查清单项目启动
  • 原文地址:https://www.cnblogs.com/zitjubiz/p/upload_image_preview_javascript.html
Copyright © 2011-2022 走看看