Javascript 从多文件输入获取文件URL[类型=“文件”]

我有一个可以接受多个文件的输入，在更改时（每当使用输入选择一个文件时），我想获取图像的url，这样我就可以循环浏览每个图像，并更新页面上其他地方的一些

标记，以预览您上传的图像

我已经设法用另一个输入来实现这一点，它只是一个文件，而不是多个文件。这里是我的单文件输入方法，它是有效的，然后是到目前为止针对

多个

打开的输入的方法的详细信息

这是工作单文件输入

现在，这是我试图为上传到输入的文件获取相同的input.files数据，该文件接受多个文件

对于初学者，我只是简单地检查输入中是否有任何数据：

FileList {0: File, length: 1}
0: File {name: "single-toilet-roll-holder-2.jpg", lastModified: 1576627618564, lastModifiedDate: Wed Dec 18 2019 00:06:58 GMT+0000 (Greenwich Mean Time), webkitRelativePath: "", size: 91672, …}
length: 1
__proto__: FileList

如您所见，它将返回0个结果。在我的测试中，我通过输入选择了1个图像，但没有得到任何结果

$(document).on("change", ".additional-images-input", function(){
  read_multi_file_input(this)
});

function read_multi_file_input(input) {
  console.log(input);
  console.log(input.files);
}

// CONSOLE LOG RESULT:

文件列表{长度：0}

这是多文件输入元素：

<input id="html5_1dseu9ccnu7a19ag13lc1j7a1nj33" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,image/png,.png" class="additional-images-input">

FileList {length: 0}

---

在JavaScript中使用for循环：

//用于处理来自输入的图像url的函数。
函数读取功能图像URL（输入）{
console.log（input.files）；
var max=input.files.length；
对于（i=0；i
我不知道为什么您无法获取任何文件。基本测试表明它是有效的。下面显示了如何使用forEach访问选定的每个文件。它还为每个文件生成一个图像


函数读取功能图像URL（文件）{
//清除所有旧图像
var outElem=$（“#输出”）.html（“”）
//将文件列表转换为数组
Array.from（文件）
//在文件数组上循环
.forEach（函数（文件）{
//创建一个新的文件读取器
var reader=new FileReader（）
reader.onload=函数（e）{
//创建图像元素并设置源
变量img=$（“
#输出img{
宽度：25%；
}

因此创建一个循环。如前所述，我得到的返回值为0，因此当前没有可循环的内容。您希望输出什么？注意：您不需要此文件的内容，因此您不希望“读取”它，也不希望使用文件阅读器。因为您希望链接到它，以便可以显示它，创建指向它的链接。要做到这一点，使用同步方法，您将从无用的回调噩梦中解脱出来，同时从用户设备中节省大量内存。Ps：我确实投票认为关闭时缺少一个，而不是重复。请尝试制作一个我们也会遇到相同问题的，您可以使用o在问题本身中创建可运行的代码段。答案似乎有很大缺陷。首先，它只有一个图像，其次，您只加载第一个图像。
<input id="html5_1dseu9ccnu7a19ag13lc1j7a1nj33" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,image/png,.png" class="additional-images-input">

FileList {length: 0}

<input id="html5_1dseu9ccnu7a19ag13lc1j7a1nj33" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,image/png,.png" class="additional-images-input">