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

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 /> 开火值发生了变化。

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