输入文件到数组 javascript/jquery

input file to array javascript/jquery

提问by John Christian De Chavez

i have an input type file where i put into a variable in javascript where i want to manipulate the files.

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

HTML:

HTML：

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

JavaScript:

JavaScript：

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

how can i delete a specific item in upload variable?.I have search that input type file is a readonly and you cannot manipulate it unless you put it to an array and upload the files with ajax.

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

im doing this for upload to my gallery. first i select multiple images. then there will be a preview first for the pictures before uploading. there will be also an option to remove a photo. my problem is. how can i delete that photo file in input file. so the possible solution is to store input file to array then delete what photo you want in the array then create a formdata for the array and upload using ajax

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

采纳答案by guest271314

Edit, Updated

编辑、更新

how can i delete a specific item in upload variable?

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

If expected result is array of file objects would adjust approach to splicing array items from original filesobject - and sending spliced array as upload - instead of attempting to "delete" items from original filesobject andstill uploading original filesobject.

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

---

---

FileListobject does not have .splice()method . Try utilizing .slice(), .call()to convert filesto Array, then call .splice()method on array of Fileobjects, e.g.;

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

// `_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]);

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

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

---

---

Alternatively , utilize

或者，利用

item()

Returns a File object representing the file at the specified index in the file list.

物品（）

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

to return files at specific indexwithin FileList

在特定index范围内返回文件FileList

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

回答by lizz

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