Question

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

我已经找到了这些：

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

Answer 1

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

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

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

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

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

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

<强>要求：

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

<强>优点：

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

Answer 2

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

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: