jQuery : 具有多拖放区的拖放式上传答案

【问题标题】：jQuery : a drag-and-drop upload with multi dropzonejQuery : 具有多拖放区的拖放式上传
【发布时间】：2012-01-26 20:09:08
【问题描述】：

我想开发一个文件夹和文件树，并在文件夹上拖放上传。

例子：

对于拖放上传，我资助jQuery File Upload。

基本代码是：

$('#fileupload').fileupload({
    dataType: 'json',
    url: 'php/index.php',
    dropZone: $(document),
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

在我的项目中，我有多个 dropzone（我的文件夹），例如：

<ul>
    <li>Bookmarks</li>
    <li>Search</li>
    <li>Web dev</li>
    ...
</ul>

如何更改上面的代码来处理带有 id、class 和 jQuery 选择器的多 dropzone？

我尝试了类似的方法，但显然它不起作用：

<ul>
    <li id="folder1" class="folder">Bookmarks</li>
    <li id="folder2" class="folder">Search</li>
    <li id="folder3" class="folder">Web dev</li>
    ...
</ul>

$('.folder').fileupload({
    dataType: 'json',
    url: 'php/index.php',
    dropZone: $('.folder'),
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text($(this).attr(id)).appendTo(document.body);
        });
    }
});

问题：

上传已完成 3 次。
$(this) 不存在。

【问题讨论】：

标签： javascript jquery upload drag-and-drop treeview

【解决方案1】：

我和同事找到了解决方案。

其实并不复杂：

    $('.folder').each(function(){
        var $this = $(this);

        $this.fileupload({
            dataType: 'json',
            url: 'php/index.php',
            dropZone: $this,
            done: function (e, data) {
                $.each(data.result, function (index, file) {
                    $('<p/>').text($this.attr('id')).appendTo(document.body);
                });
            }
        });
    });

编辑：我的错，这个答案在the documentation。

【讨论】：