0

基本代码在上传之前预览图像中的代码也如下所示：

    <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();
        }

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

4

1 回答 1

1

只需打开 CSS display:none，#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。

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

<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>

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

于 2013-05-31T16:24:57.823 回答