JavaScript 从要上传的文件列表中删除文件

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

由于您无法编辑只读 input.files attribute, you must upload a form using XMLHttpRequest and send a FormData object. I will also show you how to use 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>

Answer 2

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

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

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

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

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

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

要求：

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

优点：

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

JavaScript 从要上传的文件列表中删除文件

JavaScript delete File from FileList to be uploaded

javascript

file-upload

file

input

filereader