javascript - JQuery 从列表中删除选定的文件

Question

我有多个文件输入并且我正在返回所选项目的名称，我想在我的列表中添加删除选项，例如当用户选择 2 个文件时，可以在上传文件之前删除其中的任何一个。

Code

<!-- HTML -->
<input type="file" name="file" placeholder="Choose File" id="file" multiple>

<!-- showing selected files names -->
<div class="row">
    <div class="col-md-12 filenames"></div>
</div>

<!-- SCRIPT -->
$(document).ready(function (e) {
    document.getElementById('file').onchange = function () {
        var row = 0;
        if (this.files.length > 0) {
            // THE TOTAL FILE COUNT.
            $('.filenames').append('Total Selected Files: <b>' + this.files.length + '</b></br >');

            // RUN A LOOP TO CHECK EACH SELECTED FILE.
            for (var i = 0; i <= this.files.length - 1; i++) {
                var fname = this.files.item(i).name;      // THE NAME OF THE FILE.
                var fsize = this.files.item(i).size;      // THE SIZE OF THE FILE.
                // SHOW THE EXTRACTED DETAILS OF THE FILE.
                $('.filenames').append(++row + "- " + fname + ' (<b>' + fsize + '</b> bytes) <hr/>');
            }
        }
    };
});

Current result

有什么建议么？

标签： javascriptjquery

Answer 1

似乎 File API 没有提供从 FileList 中删除文件的方法，但您可以从 FileList 对象创建一个常规数组，然后使用该splice方法并按索引删除文件。

let files = []

$("#file").on('change', function() {
  files = [...files, ...this.files]
  renderFiles(files)
})

$("#submit").on('click', function() {
  console.log(files)
})

function renderFiles(files) {
  let row = 0;
  $('.filenames').html('')

  if (files.length) {
    $('.filenames').append(`Total Selected Files: <b>${files.length}</b></br >`);

    files.forEach(({ name, size }, index) => {
      const fileEl = $('<div class="file-item">')
      const text = $('<span>', {
        html: `${++row}- ${name} (<b>${size}</b> bytes)`
      })
      const btn = $('<button>', {
        text: 'X'
      })

      btn.on('click', function() {
        files.splice(index, 1)
        renderFiles(files)
      })

      fileEl.append(text)
      fileEl.append(btn)

      $('.filenames').append(fileEl);
      $('.filenames').append('<hr />')
    })
  }
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML -->
<input type="file" name="file" placeholder="Choose File" id="file" multiple>

<!-- showing selected files names -->
<div class="row">
  <div class="col-md-12 filenames"></div>
</div>

<div class="row">
  <button id="submit">Submit</button>
</div>