Question

我正在尝试为上传的文件构建图像预览，但是当用户在同一输入上重新上传时，我希望图像更新其预览。我为多个图像编写的代码有效，但具有主图像的代码却无效。

$(function() {

  // Multiple images preview in browser
  var imagesPreview = function(input, placeToInsertImagePreview, type) {
    if (type === 'multiple') {
      if ($('#gallery').children().length > 1) {
        $('#gallery').children().slice(1).remove();
      }
    } else if (type === 'primary') {
      $('#primary').empty();
    }

    if (input.files) {
      var filesAmount = input.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();

        reader.onload = function(event) {
          $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview).addClass('col rounded upload-img shadow-sm');

        }

        reader.readAsDataURL(input.files[i]);
      }
    }
    var $fileUpload = $("input[type='file']");
    if (parseInt($fileUpload.get(0).files.length) > 2) {
      alert("You can only upload a maximum of 2 files");
    }
  };

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery', 'multiple');
  });
  $('#primary').on('change', function() {
    imagesPreview(this, 'div.primary', 'primary');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="image[]" multiple id="gallery-photo-add">
<div class="card primary" id="primary"></div>
<div class="gallery row" id="gallery"></div>

我试图在内部控制台日志

          }else if (type === 'primary') {
              $('#primary').empty();
              console.log('deleted');
          }

它显示已删除，但不执行任何操作。我也尝试过类似的事情

          }else if (type === 'primary') {
              $('#primary').children().remove();
          }

仍然没有运气。我想念什么？

这是完整的输入内容

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01">@lang('product.upload')</span>
                    </div>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="primary" name="primaryimg" aria-describedby="primary">
                        <label class="custom-file-label" for="primaryimg">Choose file</label>
                    </div>
                </div>
                <input type="file" name="image[]" multiple id="gallery-photo-add">
                <div class="card primary" id="primary"></div>
                <div class="gallery row" id="gallery"></div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>

Answer 1

您可以在输入中使用files来获取长度：

var filesCount = $(this)[0].files.length;

$(function() {

  // Multiple images preview in browser
  var imagesPreview = function(input, placeToInsertImagePreview, type) {
    if (type === 'multiple') {
      if ($('#gallery').children().length > 1) {
        $('#gallery').children().slice(1).remove();
      }
    } else if (type === 'primary') {
      $('#primary').empty();
    }

    if (input.files) {
      var filesAmount = input.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();

        reader.onload = function(event) {
          $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview).addClass('col rounded upload-img shadow-sm');

        }

        reader.readAsDataURL(input.files[i]);
      }
    }
    var $fileUpload = $("input[type='file']");
    if (parseInt($fileUpload.get(0).files.length) > 2) {
      alert("You can only upload a maximum of 2 files");
    }
  };

  $('#gallery-photo-add').on('change', function() {
    var filesCount = $(this)[0].files.length;
    console.log(filesCount);
    imagesPreview(this, 'div.gallery', 'multiple');
  });
  $('#primary').on('change', function() {
    imagesPreview(this, 'div.primary', 'primary');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="image[]" multiple id="gallery-photo-add">
<div class="card primary" id="primary"></div>
<div class="gallery row" id="gallery"></div>

Answer 2

根据您发布的编辑，有两个具有相同ID primary的DOM元素（文件元素和div）。但是在任何情况下，DOM都不应包含两个具有相同ID的元素。因此，如果您希望单个文件上载与多个文件一样工作，请为需要清空的div使用不同的ID。就像

<div class="card primary" id="singlefile"></div>

您可以通过定位ID来清空此div

}else if (type === 'primary') {
          $('#singlefile').empty();
          console.log('deleted');
      }

希望这会有所帮助。

无法使用jQuery清空div

2 个答案: