在 之前的帖子 中，我们向您展示了如何使用 input 元素上传多个文件。在 Firefox 3.6 中，您可以让用户将文件直接拖放到网页中，而无需通过文件选择器。

演示

如果您正在运行最新的 Firefox 3.6 测试版，请查看我们的 拖放交互式演示。它展示了两种技术：拖放 API 和 文件 API。

拖放事件

要使用拖放，您首先需要告诉浏览器给定元素可以处理已放置的对象并会对放置操作做出响应，使用 dragover 和 drop 事件。

您还需要阻止浏览器的默认行为，即仅在浏览器窗口中加载已放置的对象。

dropzone.addEventListener("dragover", function(event) {
  event.preventDefault();
}, true);
dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  // Ready to do something with the dropped object
}, true);

您可能还想使用 dragenter 和 dragleave 事件来通知拖动会话何时开始或停止。

您的元素现在已准备好使用 drop 事件接收文件。

操作文件

在 drop 事件中，您可以使用 DataTransfer 对象的 files 属性访问文件。

dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  // Ready to do something with the dropped object
  var allTheFiles = event.dataTransfer.files;
  alert("You've just dropped " + allTheFiles.length + " files");
}, true);

访问文件后，文件 API 允许您执行更多操作，例如将文件解析为二进制数组，或通过将文件读取为 DataURL 来显示图像预览。

当然，您仍然可以使用 拖放 API 拖放除文件以外的数据（例如文本、URL、远程图像等）。