如何从多个输入文件控件中获取文件？

Question

我有多个通过代码动态生成的文件输入控件。我尝试放置如下示例脚本

<input type="file id="file1" />
<input type="file" id="file2" />

JS:

    $(document).ready(function(){
        $('input:file').on('change', function ()
        {
            for (var i = 0; i < this.files.length; i++)
            {
                alert(this.files[i].name);
            }
        });
    });

我认为我在获取文件时的代码是错误的。

Answer 1

我想你可以这样做：

$('input[type="file"]').on('change', function() {
    $('input[type="file"]').each(function() {
        alert($(this).val());
    });
});

如果我正确理解了你的问题，这应该可以满足你的需要。您的代码的问题是您为选择器提供了多个项目来侦听更改，但是每个项目都与选择器匹配，在这种情况下，给定示例 html 标记的两个项目触发 on用值发生变化的 <input /> 触发。

这段代码应该监听任何文件输入的变化，然后在发生变化时它会再次使用相同的选择器现在扫描两个输入并输出值。不过在这段代码中，它会输出文件的路径，所以你需要做一些正则表达式替换或其他事情来得到文件名。

如何从多个输入文件控件中获取文件？

how to get the files from multiple input file control?

javascript

jquery

input-type-file