如何通过循环创建多个JavaScript DataTransfer对象并调用使用

我来帮你梳理下问题所在，一步步解决你的两个错误：

一、循环创建DataTransfer对象的语法错误 #

你原来的代码里var cars[i] = new DataTransfer();是典型的语法错误——var关键字后面只能跟合法的变量名，不能直接用数组下标。而且你原本的cars是存储字符串的数组，直接覆盖也不符合你的需求（你需要把每个字符串对应一个DataTransfer实例）。

正确的做法是创建一个**容器对象（或数组）**来存储这些DataTransfer实例，比如用对象来映射名字和实例：

var cars = ["test1", "test2", "test3", "test4"];
// 新建一个对象，用来保存每个名字对应的DataTransfer实例
var transferStore = {};

for(let i = 0; i < cars.length; i++) {
    // 用cars里的字符串作为键，存储对应的DataTransfer对象
    transferStore[cars[i]] = new DataTransfer();
}

这样之后，transferStore.test1、transferStore.test2就分别是你需要的DataTransfer实例了。

二、调用时的对象类型错误 #

你后面的代码$("#testing").attr('value').items.add(f)会报错，是因为$("#testing").attr('value')返回的是字符串"test1"，而不是你创建的DataTransfer对象——字符串根本没有items属性，自然会提示“无法读取undefined的add属性”。

正确的做法是先从我们的容器里拿到对应的DataTransfer实例，再调用items.add()：

<span id="testing" value="test1"></span>

var f = new File([""], "filename.txt", {type: "text/plain"});
// 获取span标签的value属性值，也就是我们要找的DataTransfer实例的键
var targetKey = $("#testing").attr('value');
// 从transferStore里拿到对应的DataTransfer对象，再添加文件
transferStore[targetKey].items.add(f);

这样就能正常执行，不会报错啦。

备注：内容来源于stack exchange，提问作者NitinS