jQuery: tải lên kéo và thả với đa vùng thả

Question

Tôi muốn phát triển một cây thư mục và tệp có tải lên kéo và thả trên các thư mục.

Ví dụ:

Đối với upload drag-and-drop, tôi tài trợ cho jQuery File Upload.

Mã cơ bản là:

$('#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); 
     }); 
    } 
}); 

Trong dự án của tôi, tôi đã đa vùng thả (thư mục của tôi) như ví dụ:

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

Làm thế nào để thay đổi mã ở trên để xử lý multi dropzone với id, class và jQuery selectors?

---

tôi đã cố gắng một cái gì đó như thế này nhưng rõ ràng nó không hoạt động:

<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); 
     }); 
    } 
}); 

vấn đề:

• tải lên được thực hiện 3 lần.
• $ (điều này) không tồn tại.

Answer 1

Tôi đã tìm được giải pháp với đồng nghiệp.

Trên thực tế nó không phức tạp:

$('.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); 
       }); 
      } 
     }); 
    }); 

Edit: xấu của tôi, câu trả lời này là trong the documentation.