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

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 />一起触发。

此代码应侦听任何文件输入中的更改，然后在更改时它将再次使用相同的选择器扫描输入并输出值。但是，在此代码中，它将输出文件的路径，因此您需要执行一些正则表达式替换或其他操作才能仅获取文件名。