HTML5 拖放

Question

我正在尝试使用 dataTransfer.getData (http://html5demos.com/drag-anything) 设置 HTML5 拖放，它将任何文本读入拖放窗口并使用 plupload (http://www.plupload.com ) 以保存该数据。

当前代码：

if (getDataType.checked == false && e.dataTransfer.types) {
    li.innerHTML = '<ul>';
    [].forEach.call(e.dataTransfer.types, function (type) {
      li.innerHTML += '<li>' + entities(e.dataTransfer.getData(type) + ' (content-type: ' + type + ')') + '</li>';
      if (e.dataTransfer.types == 'Files') {
          li.innerHTML += '<li>' + entities(e.dataTransfer.getData(type) + ' (uploadable: ' + type + ')') + '</li>';
      }
    });
    li.innerHTML += '</ul>';

  } else {
    // ... however, if we're IE, we don't have the .types property, so we'll just get the Text value
    li.innerHTML = e.dataTransfer.getData('Text');
  }

我需要帮助将 dataTransfer.getData 的输出带到 plupload 和 dropzone 知道文件和文本 sn-p 之间的区别。

编辑： 围绕我尝试过的内容添加更多上下文。 1. 如果删除的项目是文件，则使用 if 语句执行某些操作。这不起作用，因为（我相信）这些项目已经被丢弃，因此无法上传 2. 获取dataTransfer.files，但它不存储可上传的文件并杀死sn-p的即时写入。

我认为解决方案涉及在开始时查询已删除的项目，然后使用 plupload 获取文件，使用 dataTransfer.getData 获取 sn-ps - 问题是我不知道该怎么做。任何帮助将非常感激。

Answer 1

您可以将另一个事件绑定到 plupload 放置区域。在那个事件上检查它是否是一个 sn-p，如果是，用 sn-p 做你想要的。否则就让 plupload 处理文件拖放。

www.plupload.com 上有很多例子，他们也有一些非常好的论坛。

我还在这里写了一篇博文http://www.foliotek.com/devblog/plupload-custom-file-upload-ui/，展示了如何绑定一个自定义 UI，该 UI 使用 Plupload 的拖放区域来管理文件上传。

希望对你有帮助……