Javascript 在上传前预览图像，隐藏损坏的img_Javascript_Jquery_File Upload

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

javascript jquery file-upload

Javascript 在上传前预览图像，隐藏损坏的img,javascript,jquery,file-upload,Javascript,Jquery,File Upload,基本代码在中，代码也如下所示： <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#bl

基本代码在中，代码也如下所示：

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

但它隐藏了所有的图像。

欢迎任何帮助！谢谢您的时间。

只需在

#blah

上显示CSS

无

，然后修改您的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>


;（函数（$）{
函数readURL（输入）{
var$prev=$（'#blah'）；
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$prev.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
$prev.show（）；
}否则{
$prev.hide（）；
}
}
$（'#imgInput'）。on（'change'，function（）{
readURL（this）；
});
})（jQuery）；

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

谢谢Plant，我以后将避免内联调用。但是如果没有选择图像，则断开的图像仍会显示在页面上。它似乎没有通过else语句。确认抱歉，我没有正确的img id，编辑了我的答案以将

#blah

的CSS设置为

显示：无首先。哦，我知道为什么。。。您在html中使用了#blah
，但在尝试的jQuery中使用了#img#u prev
？一定是我自己在写答案的时候越过了这些线哈哈，这很管用！非常感谢你。是的，我错过了display:none。顺便说一句，您的“测试”逻辑实际上会将源代码分配为#。你想要的是美元。attr（'src'）='。。。这对你的答案没有帮助，但对未来的编码事业有帮助
<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>