使用单个文件容器配置多个放置区域时的jQuery File Upload插件问题

Question

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

我要实现的目标是：文件容器位于选项卡中，因此，当文件放在选项卡上以及实际文件容器中时，应该添加文件。

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

    $('.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有任何区别，它们是根据具有相同类名的下载模板生成的没有任何问题。

我试图将add回调方法包括在初始化中，以指定servlet路径，但这也没有起作用。

您能否帮助我理解为什么会这样发生，并且还需要做任何其他配置来纠正此问题。

Answer 1

我找到了解决方案。 发布它以防万一遇到类似问题的人。

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

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

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

下面是有效的最终初始化：dropZoneElementClassName是用于li元素和实际form元素的相同类名。

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