HTML5拖放

我试图设置HTML5拖放使用dataTransfer.getData（http://html5demos.com/drag-anything）它读取任何文本到拖放窗口并使用plupload（http：// www .plupload.com）保存该数据。HTML5拖放

当前代码：

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和悬浮窗知道一个文件和文本片段之间的差异。

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

我认为这个解决方案涉及到在开始时查询丢弃的项目，然后使用plupload为文件和dataTransfer.getData为片段 - 问题是我不知道如何做到这一点。任何帮助将非常感激。

来源

2011-08-23 Bill Weberer

你已经试过了什么？我们不会只给你代码。 –

我试过如果dataTransfer.types =='文件'这样的事情，但我认为这是因为这个文件已经被删除，所以plupload不能做任何事情 –

您可以将另一个事件绑定到plupload droparea。在那个事件检查它的一个片段，如果是这样做你想要的片段。否则，让plupload处理文件的拖放。

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

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

希望有帮助...

来源

2011-08-23 14:46:16 bigamil

感谢您的帮助 - 已经使用plupload。现在我只需根据拖动是文件还是片段来显示不同的表单 –

让我知道这是否有效。我想帮助您实现这一目标。 – bigamil

@ bigamil-其实我的问题在于你提供的上述链接，你可以帮助我吗？其实Firefox 10和Chrome都没有拖放操作？我刚刚下载了样本并运行它，但它没有发生。 – coder

回答

相关问题