Javascript 使函数适用于任何一个相同类型的元素

我正在尝试创建一个文件上传系统。这个文件上传系统对于mosot部分非常有效。出现问题的原因是页面上有多个HTML元素具有class

file

和多个HTML元素是

上传按钮

。目前，文件上传仅对第一个HTML元素有效，该元素仅包含上载文本字段和上载按钮，其他所有元素均无效（由于Javascript每次都选择[0]对象）

我的问题是，我如何调整下面的功能以适应所使用的上传容器/按钮

本质上需要发生的是，如果用户单击第n个上载按钮，那么函数数组插槽需要以某种方式等于n-1

我非常感谢您对这个问题的帮助

非常感谢

$(document).on('click','.upload-button', function(){
        var data = new FormData();

        jQuery.each($('.file')[0].files, function(i, file) {
            data.append('file-'+i, file);
        });
            //Some more code...
});

HTML

使用

prev（）

只针对上一个

.file

元素，请注意您的代码没有

。file

元素，它有一个#file元素，多个ID无效

$(document).on('click','.upload-button', function(){
        var data = new FormData();

        jQuery.each($(this).prev('.file')[0].files, function(i, file) {
            data.append('file-'+i, file);
        });
            //Some more code...
});

html

---

谢谢您的回复。这很有效！！HTML中的id

文件

是一个输入错误，对此我深表歉意，我在问题中解决了这个问题。您能解释一下这个JQuery代码的工作原理吗？我被吸引住了：D函数不总是能无负担地获取页面上的第一个文件元素吗？或者，在您的实现中，它以所有

文件

元素为目标，从上载按钮前最近的元素开始，我们选择所有元素的对象[0]？因为

$（'.file'）

选择该类的所有元素，而

$（this）.prev（'.file'）

仅选择上一个元素，如果它有一个类

.file

。不客气！

$(document).on('click','.upload-button', function(){
        var data = new FormData();

        jQuery.each($(this).prev('.file')[0].files, function(i, file) {
            data.append('file-'+i, file);
        });
            //Some more code...
});

<div class="input-text-field">
     <input name="userfile" class="file" type="file" />
     <input class="submit upload-button" type="submit" value="Upload" />
 </div>