本地使用的 HTML 文件拖放

Question

我正在使用 node webkit 创建一个应用程序。我希望能够将文件拖放到目标元素中——这样我就可以获得文件名而不触发上传。这可能吗？我该怎么做？

我目前正在使用https://github.com/weixiyen/jquery-filedrop。

Answer 1

借用wiki：

// prevent default behavior from changing page on dropped file
window.ondragover = function(e) { e.preventDefault(); return false };
window.ondrop = function(e) { e.preventDefault(); return false };

var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  e.preventDefault();

  for (var i = 0; i < e.dataTransfer.files.length; ++i) {
    console.log(e.dataTransfer.files[i].path);
  }
  return false;
};

是一种选择，也是 HTML5 文件阅读器方法：

holder.ondrop = function (e) {
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target);
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
};

请务必注意，path 字段已包含在内，而不是常规浏览器不可用。