无法使用 jquery 清空 div

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

根据您发布的编辑，有两个DOM元素，具有相同的ID primary(文件元素和DIV(。但是在任何特定的情况下，DOM都应具有两个具有相同ID的元素。因此，如果您希望单个文件上传与多个文件一样工作，请为需要空的div使用其他ID。例如

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

您可以通过以ID为目标

来清空此div

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

希望这会有所帮助。