2011-12-23 6 views
7

フォルダのドラッグアンドドロップアップロードでフォルダとファイルのツリーを作成したいと考えています。jQuery:マルチドロップゾーンを使用したドラッグ&ドロップアップロード

例:ドラッグ&ドロップのアップロードについては

enter image description here

、私は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); 
     }); 
    } 
}); 

、私は例えばのようなマルチドロップゾーン(私のフォルダ)をしました:処理するために上記のコードを変更する方法

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

id、class、jQueryセレクタを持つマルチドロップゾーン?


私はこのような何かをしようとしたが、明らかにそれは動作しません:

<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回行われます。
  • $(これ)は存在しません。

答えて

12

私は同僚との解決策を見つけました。

は実際に、それは複雑ではありませんでした:

$('.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にありました。

関連する問題