javascript - 使用 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 对象的类型，以确保在尝试通过以下方式显示它之前它是一个图像:

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>