javascript - 使用单个文件容器配置多个放置区时，JQuery 文件上传插件出现问题

Question

我正在使用 jQuery 文件上传插件 https://github.com/blueimp/jQuery-File-Upload

我想要实现的是:文件容器位于选项卡中，因此当将文件拖放到选项卡上以及将文件拖放到实际文件容器上时，应该添加文件。

通过为选项卡 li 元素以及文件容器 tbody 所在的表单提供相同的类，我可以使用以下初始化配置具有单个文件容器的两个拖放区。将文件拖放到选项卡上以及实际文件容器上时，上传模板在这两种情况下都能正确呈现

    $('.fileupload').each(function() {
        var fileContainerElement;

        if($(this).is("li")){
            fileContainerElement = $($(this).find("a").attr("href")).find('table[role="presentation"]').find("tbody.files");
        } else{
            fileContainerElement = $(this).find("tbody.files");
        }

        $(this).fileupload({
            filesContainer: $(fileContainerElement),
            dropZone : $(this)
        });

    });        

我面临的问题是:上传对于拖放到选项卡上的文件不起作用，但对于直接拖放到文件容器表单上的文件工作正常。

我观察到的此问题的原因是:对于在提交其采取不同操作时拖放到选项卡上的文件，该文件不是为此组件配置的上传 servlet。我尝试通过检查通过将文件放在表单上的选项卡上创建的每一行来验证生成的 html，但我没有看到生成的 html 有任何差异，它们是根据具有相同类名的下载模板生成的没有任何问题。

我尝试在初始化中包含添加回调方法，以指定 servlet 路径，但这也没有生效。

您能否帮助我理解为什么会发生这种情况，以及我是否需要执行任何其他配置来纠正此问题。

Answer 1

我找到了解决方案。发布它，以防它可能对遇到类似问题的人有所帮助。

原因是我试图在放置区上配置文件上传插件并为其指定文件容器。但必须以相反的方式完成

在作为文件容器的表单上初始化 fileupload 插件，并为其指定 dropzone。

我找不到一种方法来为一次初始化指定两个放置区域，因此我为这两个放置区域提供了相同的类名称，并根据该类指定了选择器，这解决了问题。

下面是正在运行的最终初始化:dropZoneElementClassName 与 li 元素和实际表单元素使用的类名相同。

    $('form.fileupload').each(function() {
        $(this).fileupload({
            var dropZoneElement;
            dropZoneElement = $(".dropZoneElementClassName");
            filesContainer : $(this).find("tbody.files"),
            dropZone : dropZoneElement
        });
    });