javascript - 使函数适用于任何一种相同类型的元素

Question

我正在尝试创建一个文件上传系统。这个文件上传系统非常适合 mosot 部分。出现问题是因为页面上有多个 HTML 元素具有类 file 和多个 HTML 元素是 upload-buttons。目前，文件上传仅适用于第一个包含上传文本字段和上传按钮的 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

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

Answer 1

使用 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

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