输入文件到数组javascript / jquery

我有一个输入类型文件,我在javascript中放入一个变量,我想操纵文件。

HTML:

 

JavaScript的:

 var upload = document.getElementById('file1'); upload.files.splice(idtoremove,1) //not working 

如何删除上传变量中的特定项目?。我搜索输入类型文件是只读的,除非将其放入数组并使用ajax上传文件,否则无法对其进行操作。

我这样做是为了上传到我的画廊。 首先我选择多个图像。 然后在上传之前会先预览图片。 还可以选择删除照片。 我的问题是。 如何在输入文件中删除该照片文件。 所以可能的解决方案是将输入文件存储到数组然后删除数组中你想要的照片然后为数组创建一个formdata并使用ajax上传

编辑,更新

如何删除上传变量中的特定项?

如果预期结果是文件对象数组将调整从原始files对象拼接数组项的方法 – 并将拼接数组作为上载发送 – 而不是尝试从原始files对象“删除”项目仍然上载原始files对象。


FileList对象没有.splice()方法。 尝试使用.slice()files转换为Array ,然后在File对象的数组上调用.splice()方法,例如;

 // `_files` : `File` object items from original `files` `FileList` // call `.splice()` on items that would be uploaded , // upload `_files` array - _not_ original `files` `FileList` object // eg; `_files`:`File` objects to _keep_ not "delete" from `files` var idstokeep = [0, 2]; // splice , keep first `2` files var _files = Array.prototype.slice.call(files).splice(idstokeep[0], idstokeep[1]); 

看看Array.prototype.slice.call()是如何工作的?


或者,利用

项目()

返回表示文件列表中指定索引处的文件的File对象。

返回FileList中特定index处的文件

  var files = e.target.files; // return `file` at `index` `1` var firstFile = files.item(1); 

 var upload = document.getElementById("file1"); upload.onchange = function(e) { var files = e.target.files; // https://developer.mozilla.org/en-US/docs/Web/API/FileList#item var firstFile = files.item(1); var idstokeep = [0, 2]; // keep first `2` files from `multiple` selection var _files = Array.prototype.slice.call(files).splice(idstokeep[0], idstokeep[1]); console.log(files, files.length , _files, _files.length , firstFile); }; 
   
 var upload = document.getElementById("file1"); upload.onchange = function(e) { var files = e.target.files; // https://developer.mozilla.org/en-US/docs/Web/API/FileList#item var firstFile = files.item(1); var idstokeep = [0, 2]; // keep first `2` files from `multiple` selection var _files = Array.prototype.slice.call(files).splice(idstokeep[0], idstokeep[1]); console.log(files, files.length , _files, _files.length , firstFile); };