Question

Preview an image before it is uploaded代码中的基本代码也显示在下面：

    <script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

    <body>
<form id="form1" runat="server">
    <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</form>

代码工作正常，但是当没有选择img时它会显示损坏的图像图标。我试着用

    if($('#img_prev').attr('src',"#"){
       $('#img_prev').hide();
        }

但它隐藏了所有图像。欢迎任何帮助！谢谢你的时间。

Answer 1

只需在display:none上创建CSS #blah，然后修改您的JS即可拥有此功能：

function readURL(input) {
    var $prev = $('#blah'); // cached for efficiency

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $prev.attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);

        $prev.show(); // this will show only when the input has a file
    } else {
        $prev.hide(); // this hides it when the input is cleared
    }
}

当输入改变时，这应该适当地显示/隐藏img。

顺便说一下，如果你使用的是jQuery，你真的不应该使用像onchange=这样的内联调用。这样的事情要好得多：

<script type="text/javascript">
    ;(function($){
        function readURL(input) {
            var $prev = $('#blah');

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                    reader.onload = function (e) {
                        $prev.attr('src', e.target.result);
                    }

                reader.readAsDataURL(input.files[0]);

                $prev.show();
            } else {
                $prev.hide();
            }
        }

        $('#imgInput').on('change',function(){
            readURL(this);
        });
    })(jQuery);
</script>

<body>
    <form id="form1" runat="server">
        <input id="imgInput" type='file' />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>

这将所有逻辑封装在一个地方，更容易维护。当然，下一步是将其放在外部文件而不是页面上，但这超出了这个范围。

在上传图像之前预览图像，隐藏损坏的图像

1 个答案: