输入文件到数组 javascript/jquery答案

【问题标题】：input file to array javascript/jquery输入文件到数组 javascript/jquery
【发布时间】：2015-04-24 07:22:00
【问题描述】：

我有一个输入类型文件，我在其中放入了一个我想要操作文件的 javascript 变量。

HTML：

<input class="file" id="file1" name="uploadedimages[]" type='file' multiple/>

JavaScript：

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

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

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

【问题讨论】：

对此感到抱歉。我已经编辑了我的问题
@JohnChristianDeChavez 在帖子中尝试过js？
@guest271314 嗨，先生，您是什么意思？
@JohnChristianDeChavez 查看更新后的帖子。尝试将change 事件附加到input 元素以访问文件。见developer.mozilla.org/en-US/docs/…

标签： javascript jquery

【解决方案1】：

编辑、更新

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

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

FileList 对象没有.splice() 方法。尝试利用 .slice() ， .call() 将 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
// e.g.; `_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]);

见how does Array.prototype.slice.call() work?

或者，利用

item()

返回一个 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);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input class="file" id="file1" name="uploadedimages[]" type='file' multiple/>

【讨论】：

@guest271314 我希望 OP 会在你的答案中说些什么，否则我们会白白浪费时间。据我了解，OP 希望通过从此列表中删除一项来更改 upload.files 对象（FileList）。 从列表中删除 确实意味着 original 对象已更改，而不是其在其他地方的修改版本。作为此操作的结果之一，您应该在默认的<input type="file"> 信息中看到“选择了 2 个文件”而不是“选择了 3 个文件”。 This fiddle 说明了需要什么。但由于只读，它不起作用。
@Regent 是的。更新了利用.splice() 创建“新”文件对象数组以“保留”的帖子尝试方法，不尝试修改、“删除”或上传原始FileList 对象。另见stackoverflow.com/questions/26245482/…
@Regent 而不是 splice() ，可以在循环中使用 files.item(index) 来返回，上传所需的文件？，如果端点的预期结果是 File object ，而不是 Array ？查看更新的 stacksn-ps 。
@guest271314 您可以使用upload.files.item(index) 或upload.files[index] 遍历选定的文件，但upload.files[1] = { }; 和delete upload.files[1] 都不起作用，因为upload.files 的只读状态。
@Regent 和 guest271314。我这样做是为了上传到我的画廊。首先我选择多个图像。然后在上传之前会先预览图片。还有一个删除照片的选项。我的问题是。如何在输入文件中删除该照片文件。所以可能的解决方案是将输入文件存储到数组中，然后在数组中删除你想要的照片，然后为数组创建一个表单数据并使用 ajax 上传

【解决方案2】：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input class="file" id="file1" name="uploadedimages[]" type='file' multiple/>

【讨论】：