如何使用 filepicker.io 在同一页面上创建多个下拉窗格答案

【问题标题】：How to create multiple drop pane on same page using filepicker.io如何使用 filepicker.io 在同一页面上创建多个下拉窗格
【发布时间】：2014-11-27 05:37:06
【问题描述】：

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

【问题讨论】：

标签： filepicker.io

【解决方案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>

【讨论】：