在输入单击/更改时隐藏图像预览

我在 JavaScript 中创建了一个图像预览,其中包含一些我在这里找到的脚本,我是 JS 新手,现在我正在尝试替换内容而不是附加内容。这是代码


我试过把empty(), replaceWith(), remove(), 就像appendTo()关于 SO 的其他类似问题一样,我试过创建一个函数来隐藏 div,但似乎没有任何效果。我想知道是否有人会知道为什么这些功能不起作用,我做错了什么吗?


//my html/php


echo '<input required type="file" name="filesToUpload[]" multiple 

id="image_upload" accept=".jpg, .jpeg">';

echo '<div id="gallery-preview" class="gallery-preview"></div>';


//javascript

    $(function() {


        var imagesPreview = function(input, placeToInsertImagePreview) {


            if (input.files) {


                var filesAmount = input.files.length;


                for (i = 0; i < filesAmount; i++) {


                    var reader = new FileReader();


                    reader.onload = function(event) {


                        $($.parseHTML('<img style="width:150px; height:75px; margin-left:2px; margin-right:2px; border:1px solid black; padding:2px;">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);

                    }

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

                }

            }

        };

        $('#image_upload').on('change', function() {

            imagesPreview(this, 'div.gallery-preview');

        });

    });

当我hide()为 div创建一个函数时gallery-preview,预览不再起作用。与上述其他功能相同


尚方宝剑之说
浏览 139回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript