jquery - 具有多个放置区域的 jQuery filedrop

Question

我正在尝试构建一个包含多个放置区域的页面，用于上传文件。每个区域都有特定的参数来接受/上传不同类型的图像。我用过 jQuery filedrop。

一个独特的放置区一切顺利，但有多个区域，只有最后一个有效。你可以在这里看到一个例子。

我不知道这是否是 filedrop 的限制，或者我做错了什么。

有人可以帮助我吗？

Answer 1

好的，我找到了解决方案的开始。

您可以做的是为每个 Dropbox 创建一个函数

$.fn.filedrop = function(options) {
    opts1 = $.extend( {}, default_opts, options );

    this.bind('drop', drop).bind('dragenter', dragEnter).bind('dragover', dragOver).bind('dragleave', dragLeave);
    $(document).bind('drop', docDrop).bind('dragenter', docEnter).bind('dragover', docOver).bind('dragleave', docLeave);
};

为第一个投递箱创建一个 var opts1，然后opts2为第二个投递箱创建一个 var，依此类推......并在每个函数$.fn.filedrop中替换 var opts，opts1 opts2这样你就有一个$.fn.filedrop1用于第一个投递箱的函数，然后是$.fn.filedrop2第二个投递箱的函数，依此类推。在每个函数中，您将 drop 函数绑定到每个drop1 drop2函数this.bind('drop', drop2)，并创建与 dropbox 一样多的 drop 函数。在每个 drop 函数中，您添加第一行，因此在每次 drop 时，它将根据 dropbox 更新选项

function drop2(e) {
    opts = opts2;
    opts.drop(e);
    files = e.dataTransfer.files;
    if (files === null || files === undefined) {
        opts.error(errors[0]);
        return false;
    }

    files_count = files.length;
    upload();
    e.preventDefault();
    return false;
}

当然，您根据每个保管箱绑定每个 filedrop 功能dropbox2.filedrop2({...