输入文件到数组javascript / jquery [英] input file to array javascript/jquery

问题描述

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

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

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    

我怎么能删除上传变量中的特定项目？。我搜索输入类型文件是只读的，你不能操作它，除非你把它放到一个数组并上传带有ajax的文件。

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.

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

推荐答案

编辑，更新

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

how can i delete a specific item in upload variable?

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

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

FileList 对象没有 .splice（）方法。尝试使用 .slice（）， .call（）转换文件到数组，然后在文件<的数组上调用 .splice（）方法/ code>对象，例如;

FileList object does not have .splice() method . Try utilizing .slice() , .call() to convert files to Array , then call .splice() method on array of File objects, e.g.;

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

参见 Array.prototype.slice.call（）如何工作？

或者，使用

item（）

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

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

返回特定索引的文件在 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/>

这篇关于输入文件到数组javascript / jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！