单击按钮时，文件 Api 应删除预览

Question

我正在尝试构建文件上传，并希望在单击灰色的“清除内容”按钮（它是德语）后清除预览。文件输入元素会自行清空，但预览不会自行更新。

这是我的代码：

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,
                          '" title="', escape(theFile.name), '" style=" height: 100px; max-width: 150px; border: 1px solid #000; margin: 10px 5px 0 0;"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Bootstrap 5 中的我的 HTML 模态

<div class="form-check">
  <div class="input-group">
      <!--<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
      <button type="button" class="btn btn-outline-send" data-bs-toggle="modal" data-bs-target="#exampleModal">
      <i class="fas fa-upload fa-2x"></i>
          <!--Dokumente hochladen-->
      </button>
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg, image/jpg, image/gif, image/png, application/pdf" multiple="multiple" value=""/>
            <output id="list"></output>
            <small>
                <strong>
                    <br>
                    Hinweis: Es können <u>maximal 19</u> Dateien aufeinmal versendet werden! <br>Unterstützte Dateiformate: PDF, JPG und PNG
                  </strong>
              </small>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-outline-send" data-bs-dismiss="modal">Weiter</button>
            <button type="button" id="clearFiles">Inhalte löschen</button>
              <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

还有一张它现在的样子 example Image

Answer 1

我为Inhalte löschen 按钮添加了一个事件监听器：

// To clear the images
document.querySelector("#clearFiles").addEventListener("click", function(){
  document.querySelector("#list").innerHTML = "";
});

请注意，我还将.insertBefore(span, null); 更改为.append(span)。所以现在图像被附加到#list div 中，而不是之前。它使清除#list的全部内容变得更加容易。

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

    // Only process image or PDF files.
    if (!f.type.match('image.*') && !f.type.match('pdf')) {
      console.log(f.type)
      continue;
    }
    
    // A flag to know if the file is an image or a PDF
    let source_is_image = true;
    if(!f.type.match('image.*')){
      source_is_image = false;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        
        // Based on the flag, decide to use the image or the PDF logo
        var file = source_is_image ? e.target.result : "https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg";
        
        span.innerHTML = ['<img class="thumb" src="', file, '" title="', escape(theFile.name), '"/>'
          ].join('');
        document.getElementById('list').append(span);
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

// To clear the images
document.querySelector("#clearFiles").addEventListener("click", function(){
  document.querySelector("#list").innerHTML = "";
});

/* This can be in the CSS instead of inline style */
.thumb{
  height: 100px;
  max-width: 150px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

<div class="form-check">
  <div class="input-group">
    <!--<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
    <button type="button" class="btn btn-outline-send" data-bs-toggle="modal" data-bs-target="#exampleModal">
      <i class="fas fa-upload fa-2x"></i>
      <!--Dokumente hochladen-->
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg, image/jpg, image/gif, image/png, application/pdf" multiple="multiple" value="" />
            <output id="list"></output>
            <small>
              <strong>
                <br>
                Hinweis: Es können <u>maximal 19</u> Dateien aufeinmal versendet werden! <br>Unterstützte Dateiformate: PDF, JPG und PNG
              </strong>
            </small>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-send" data-bs-dismiss="modal">Weiter</button>
            <button type="button" id="clearFiles">Inhalte löschen</button>
            <!--<button type="button" class="btn btn-primary">Save changes</button>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>