Question

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

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

使功能适用于任何一种相同类型的元素

1 个答案: