1. ホーム
  2. javascript

[解決済み] HTML5では、フォルダやフォルダツリーをドラッグドロップでアップロードできますか?

2023-04-09 05:38:46

質問

このような例を見たことがありません。これはAPI仕様で許可されていないのでしょうか?

私は、写真のフォルダツリー全体をアップロードするための簡単なドラッグドロップ解決策を探しています。

どのように解決するのですか?

Chrome >= 21のおかげで、可能になりました。

function traverseFileTree(item, path) {
  path = path || "";
  if (item.isFile) {
    // Get file
    item.file(function(file) {
      console.log("File:", path + file.name);
    });
  } else if (item.isDirectory) {
    // Get folder contents
    var dirReader = item.createReader();
    dirReader.readEntries(function(entries) {
      for (var i=0; i<entries.length; i++) {
        traverseFileTree(entries[i], path + item.name + "/");
      }
    });
  }
}

dropArea.addEventListener("drop", function(event) {
  event.preventDefault();

  var items = event.dataTransfer.items;
  for (var i=0; i<items.length; i++) {
    // webkitGetAsEntry is where the magic happens
    var item = items[i].webkitGetAsEntry();
    if (item) {
      traverseFileTree(item);
    }
  }
}, false);

詳細はこちら https://protonet.info/blog/html5-experiment-drag-drop-of-folders/