输入文件到数组 javascript/jquery

IT技术 javascript jquery
2021-01-15 18:07:10

我有一个输入类型文件,我在其中放入了 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上传

2个回答

编辑、更新

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

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


FileList对象没有.splice()方法。尝试利用.slice(),.call()转换filesArray,然后.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]);

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


或者,利用

物品()

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

在特定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/>

@Regent 和 guest271314。我这样做是为了上传到我的画廊。首先我选择多个图像。然后在上传之前首先对图片进行预览。还有一个选项可以删除照片。我的问题是。如何删除输入文件中的照片文件。所以可能的解决方案是将输入文件存储到数组然后删除你想要在数组中的照片然后为数组创建一个表单数据并使用ajax上传
2021-03-26 18:07:10
@guest271314 我希望 OP 会在您的回答的评论中说些什么,否则我们会白白浪费时间。据我了解,OP 希望通过从此列表中删除一项来更改upload.files对象 ( FileList)。从列表删除确实意味着更改原始对象,而不是其他地方的修改版本。作为此操作的结果之一,您应该在默认<input type="file">信息中看到“选择了 2 个文件”而不是“选择了 3 个文件” 这个小提琴说明了需要什么。但由于只读,它不起作用。
2021-03-27 18:07:10
@ guest271314你可以通过与选定的文件迭代upload.files.item(index)upload.files[index],但既不upload.files[1] = { };也不delete upload.files[1]作品,因为只读状态,upload.files
2021-03-29 18:07:10
@Regent 而不是splice(),可以利用files.item(index)循环内返回,上传所需的文件?, 如果端点处的预期结果是Fileobject ,而不是Array? 请参阅更新的堆栈片段。
2021-04-06 18:07:10
@Regent 是的。更新的帖子尝试利用.splice()创建“新”文件对象数组来“保留”,而不是尝试修改、“删除”或上传原始FileList对象的方法。另见stackoverflow.com/questions/26245482/...
2021-04-08 18:07:10

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