JavaScript 从要上传的 FileList 中删除文件

Question

有代码https://jsfiddle.net/bfzmm1hc/1 一切看起来都很好，但我想从集合中删除一些文件。

我已经找到了这些：

• How to remove one specific selected file from input file control
• input type=file multiple, delete items

我知道FileList 对象是只读的，所以我可以将文件复制到一个新数组中。但是我应该如何处理这个新的File 对象数组呢？我无法将其分配给files 属性...

Answer 1

我找到了解决方法。这根本不需要 AJAX 请求，并且可以将表单发送到服务器。基本上，您可以创建一个hidden 或text 输入并将其value 属性设置为处理所选文件后创建的base64 字符串。

<input type=hidden value=${base64string} />

您可能会考虑创建多个输入文件而不是输入text 或hidden 的想法。这将不起作用，因为我们无法为其分配值。

此方法会将输入文件包含在发送到数据库的数据中，您可以忽略输入文件：

• 在后端不考虑字段；
• 您可以在序列化表单之前将disabled属性设置为输入文件；
• 在发送数据之前删除 DOM 元素。

当您想要删除文件时，只需获取元素的索引并从 DOM 中删除输入元素（文本或隐藏）。

要求：

• 每当输入文件触发change 事件时，您需要编写逻辑以base64 格式转换文件并将所有文件存储在一个数组中。

优点：

• 这基本上会给您很多控制权，您可以过滤、比较文件、检查文件大小、MIME 类型等等。

Answer 2

由于您无法编辑只读input.files 属性，因此您必须上传表单using XMLHttpRequest and send a FormData object。我还将向您展示如何使用URL.createObjectURL 更轻松地从File 对象获取URI：

var SomeCl = {
  count: 0,
  init: function() {
    $('#images').change(this.onInputChange);
  },
  onInputChange: function() {
    // reset preview
    $('.container').empty();
    // reset count
    SomeCl.count = 0;
    // process files
    SomeCl.processFiles(this.files, function(files) {
      // filtered files
      console.log(files);

      // uncomment this line to upload the filtered files
      SomeCl.upload('url', 'POST', $('#upload').get(0), files, 'images[]');
    });
  },
  processFiles: function(files, callback) {
    // your filter logic goes here, this is just example

    // filtered files
    var upload = [];

    // limit to first 4 image files
    Array.prototype.forEach.call(files, function(file) {
      if (file.type.slice(0, 5) === 'image' && upload.length < 4) {
        // add file to filter
        upload.push(file);
        // increment count
        SomeCl.count++;
        // show preview
        SomeCl.preview(file);
      }
    });

    callback(upload);
  },
  upload: function(method, url, form, files, filename) {
    // create a FormData object from the form
    var fd = new FormData(form);
    // delete the files in the <form> from the FormData
    fd.delete(filename);
    // add the filtered files instead
    fd.append(filename, files);

    // demonstrate that the entire form has been attached
    for (var key of fd.keys()) {
      console.log(key, fd.getAll(key));
    }

    // use xhr request
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.addEventListener('progress', function(e) {
      console.log('lengthComputable', e.lengthComputable);
      console.log(e.loaded + '/' + e.total);
    });
    xhr.addEventListener('load', function(e) {
      console.log('uploaded');
    });
    xhr.addEventListener('error', function(e) {
      console.log('this is just a demo');
    });
    xhr.send(fd);
  },
  preview: function(file) {
    // create a temporary URI from the File
    var url = URL.createObjectURL(file);
    // append a preview
    $('.container').append($('<img/>').attr('src', url));
  }
};

SomeCl.init();

.container img {
  max-width: 250px;
  max-height: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="upload">
  <input name="other" type="hidden" value="something else">
  <input name="images[]" id="images" multiple="multiple" type="file">
  <div class="container"></div>
</form>