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

也许您可以采用以下方法，在let multer = require('multer'); let upload = multer(); var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, '/tmp/my-uploads') // your path }, filename: function (req, file, cb) { cb(null, file.fieldname + '-' + Date.now()) } }); var upload = multer({ storage: storage }) app.post('/send', upload.single('file'), (req, res) => { let formData = req.body; console.log('form data', formData); res.sendStatus(200); });函数中，您可以这样做：

首先在预览选择器上调用imagePreview()，以清除所有先前的图像内容
然后使用您目前使用的empty() API继续读取和显示所有选定的图像（有关修订方法，请参见下文）

另外，请考虑检查FileReader对象的类型，以确保它是图像，然后尝试通过以下方式显示它：

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

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

使用jQuery查看和隐藏图像

2 个答案: