上传文件夹javascript

我正在网上查看如何上传一个图像文件夹并使用JavaScript显示它们，我反复看到以下代码：

var inps = document.querySelectorAll('input');
[].forEach.call(inps, function(inp) {
  inp.onchange = function(e) {
    console.log(this.files);
  };
});   

首先，它在我的Google Chrome上不起作用（它没有记录任何东西），更重要的是，这种方法是什么

[].forEach.call

---

这是什么意思？（在forEach之前使用[]）？

BLOB-二进制大对象

如果要预览加载的图像，应创建blob。 将图像保存到文件库或数据库后，URL将正确

[].forEach.call

这只是一条规则，你得到了答案

let inps=document.querySelectorAll（'input'）；
[]forEach.call（inps，函数（inp）{
inp.onchange=函数（e）{
console.log（URL.createObjectURL（this.files[0]）//如果需要，创建用于预览的BLOB
for（此.files的文件）{
setFiles（file）；//解析所有上传的文件
createLIST（文件，this.files.length）；
}
};
});
//通过URL->URL\u将所有文件保存到数据库中，以便处理\u帖子
函数集文件（文件）{
console.log（文件）；
let request=new XMLHttpRequest（）；
设formData=new formData（）；
formData.append（file.name，file）；
打开（'POST'、'URL\u FOR\u GET\u POST'）；
请求。发送（formData）；
}
arResult=[]；
函数createLIST（文件、计数）{
让html=“
”；
for（将项目放入文件中）{
html+=`
${item}${file[item]}
`；
}
html+='
'；
arResult.push（html）；
if（arResult.length==计数）{
document.querySelector（“#输出数据”）.innerHTML=arResult.join（“”）；
}
}

。输出数据{
计数器复位：部分；
}
.输出数据{
边框底部：1px纯色灰色；
垫底：1毫米；
}
.输出数据ul:before{
反增量：节；
内容：“文件”计数器（部分）：“；
字体大小：粗体；
字体大小：20px；
颜色：绿色；
边缘底部：1rem；
显示：块；
}
.输出数据li{
显示器：flex；
垫底：0.25rem；
}
.输出数据li div：第一个子级{
字体大小：粗体；
flex:011200px；
}
.输出数据li div：最后一个子项{
文本对齐：左对齐；
}

[].forEach.call

或

Array.prototype.forEach.call

调用给定上下文的数组原型forEach方法，在本例中为

inps

document.querySelectorAll

返回一个对象，该对象可以作为数组处理，但实际上不是数组（它返回

NodeList

）。在这种情况下，您可以使用prototype方法并在您选择的对象上调用它们。这是否回答了您的问题？此代码必须附带至少包含一个

元素的HTML，并且在浏览器中手动选择文件时会触发此代码。谢谢。不幸的是，console.log没有记录任何内容，因此我认为它不起作用。虽然我复制并粘贴了您的代码，但它并没有遍历[].foreach.call。你知道会发生什么吗？（我注意到当我使用console.log（inps）时节点列表是空的。我更正了我的答案，并添加了指向我的codepen.io的链接->