使用jQuery查看和隱藏圖像

Question

我在使用jquery上傳之前顯示圖像，當我上傳一些新文件時，我想刪除或隱藏以前的上傳文件，這是我的jquery代碼：

$(function() 
    {
        // Multiple images preview in browser
        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 class="p-3" width="350px" height="250px">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                    }

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

        $('#file_input').on('change', function() 
        {
            imagesPreview(this, 'div#viewUploadItems');
        });
    });

還有我的HTML代碼：

<input type="file" name="images[]" id="file_input" class="deletable" multiple />
<div id="viewUploadItems"></div>

我嘗試使用此代碼，但不會顯示任何圖像。

$("#file_input").on("click",function()
{
    $('input.deletable').val('');
    $('#viewUploadItems').remove();
});

Answer 1

也許您可以采用以下方法，在imagePreview()函數中：

• 首先在預覽選擇器上調用empty()清除所有先前的圖像內容
• 然后使用您目前使用的FileReader API繼續讀取和顯示所有選定的圖像（有關修訂方法，請參見下文）

另外，在嘗試通過以下方法顯示file對象之前，請考慮檢查file對象的類型，以確保它是圖像：

if (file.type.match("image.*")) {
    /* file is image type, so attempt to preview it */
}

綜合這些想法，您可以按以下方式修改代碼：

 $(function() { function imagesPreview(input, targetSelector) { /* Empty the target area where previews are shown */ $(targetSelector).empty(); /* Iterate each file via forEach in own closure */ Array.from(input.files).forEach(function(file) { /* If file is image type proceed to preview */ if (file.type.match("image.*")) { /* Create filereader and set it up for reading */ var reader = new FileReader(); reader.onload = function(event) { /* Append a new image element, prepopulated with required attrbutes, and assigned with p-3 class */ $(targetSelector).append($('<img>', { width: '350px', height: '250px', src : reader.result }).addClass('p-3')) } reader.readAsDataURL(file); } }) } $('#file_input').on('change', function() { imagesPreview(this, 'div#viewUploadItems'); }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <input type="file" name="images[]" id="file_input" class="deletable" multiple /> <div id="viewUploadItems"></div> 

Answer 2

在顯示之前更容易清除div： $(placeToInsertImagePreview).html("");

$(function() 
    {
        // Multiple images preview in browser
        var imagesPreview = function(input, placeToInsertImagePreview) 
        {
            if (input.files) 
            {
                $(placeToInsertImagePreview).html(""); 

                var filesAmount = input.files.length;
                for (i = 0; i < filesAmount; i++) 
                {
                    var reader = new FileReader();
                    reader.onload = function(event) 
                    {

                       $($.parseHTML('<img class="p-3" width="350px" height="250px">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                    }

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

        $('#file_input').on('change', function() 
        {
            imagesPreview(this, 'div#viewUploadItems');
        });
    });