如何使用filepicker.io在同一页面上创建多个放置窗格

Question

基本上我有一个表，每行都有一个Image图标，我想把它变成一个drop窗格。任何示例代码都会有所帮助。

Answer 1

工作示例：http://jsfiddle.net/krystiangw/mb4o7kfc/1/

Js文件：

$('td').each(function(e, element){

    filepicker.makeDropPane(
        element, 
        {
          multiple: true,
          dragEnter: function() {
            $(element).html("Drop to upload").css({
              'backgroundColor': "#E0E0E0",
              'border': "1px solid #000"
            });
          },
          dragLeave: function() {
            $(element).html("Drop files here").css({
              'backgroundColor': "#F6F6F6",
              'border': "1px dashed #666"
            });
          },
          onSuccess: function(Blobs) {

            $(element).text(JSON.stringify(Blobs));
          },
          onError: function(type, message) {
            $(element).text('('+type+') '+ message);
          },
          onProgress: function(percentage) {
            $(element).text("Uploading ("+percentage+"%)");
          }
        }
    );

});

Html文件：

<table id="myTable" class="table table-bordered">     
  <tr>
    <th>
        Drag&drop panel
    </th>
  </tr>
    <tr>
    <td>
        Drop files here
    </td>
  </tr>
    <tr>
    <td>
        Or here
    </td>
  </tr>
    <tr>
    <td>
        Or here
    </td>
  </tr>
</table>