如何将FileList数组添加到<输入类型='文件'>控制

How to add FileList array into <input type='file' > control?

本文关键字：控制 输入 类型 gt 文件 lt FileList 数组 添加      更新时间：2023-09-26

在这个场景中，我有两个文件类型的输入控件。

Html:

<input type="file" id="file1" multiple="multiple" />
<input type="file" id="file2" multiple="multiple" />
<input id="btn1" type="button" />

脚本：

<script>
var fileList = [];
$('#file1').change(function (e) {
   var files = e.target.files;
            $.each(files, function (k, v) {
                fileList.push(files[k]);
            });
});
$('#btn1').click(function(){
  //Stuffs to be added for pushing the array of File object from "fileList" array to "file2"
  //How to achieve it or is that impossible to do it?
});
</script>

我想实现以下步骤：

步骤1：在"file1"输入更改时，它将把文件推入数组。

步骤2：点击"btn1"按钮，我需要将File对象数组设置或推入"file2"输入控件。但我做不到，我已经在谷歌上搜索过了。我没有找到解决方案。

我无法完成第2步并帮助我。

还提供一些可能对我有帮助的链接。

答案是使用DataTransfer对象。

// first create a var DataTransfer
/*
Used to hold the data that is being dragged
during a drag and drop operation. 
It may hold one or more data items,
each of one or more data types. 
For more information about drag and drop, 
see HTML Drag and Drop API.
*/
let data = new DataTransfer();
// now you need to iterate this
let el = document.getElementById("#myInput");
 for (let c = 0; c < el.files.length; c++) {
        // @ts-ignore
        let file = el.files[c];
        data.items.add(file);
      }
// then you can put the data files to any input file you want
let el2 =  document.getElementById("#myInput2");
el2.files = data.files;

额外：如果你想对文件数据进行切片，你需要使用for循环，数组的切片方法不适用。

// this snippet slices a data transfer alike data.slice(0,4)
let t = data.items.length;
for (let c = 0; c < t; c++) {
        c >= 4 && data.items.remove(c);
      }

向致以最诚挚的问候

相关文章：