[html] HTML5는 폴더 또는 폴더 트리의 드래그 드롭 업로드를 허용합니까?

불행히도 주어진 디렉토리에 대한 모든 (파일 또는 디렉토리) 항목을 readEntries반드시 반환하지는 않기 때문에 기존 답변 중 어느 것도 완전히 정확 하지 않습니다 . 이는 API 사양의 일부입니다 (아래 문서 섹션 참조).

실제로 모든 파일을 가져 오려면 readEntries빈 배열을 반환 할 때까지 (우리가 만나는 각 디렉토리에 대해) 반복적 으로 호출해야합니다 . 그렇지 않으면 Chrome과 같은 디렉토리의 일부 파일 / 하위 디렉토리가 누락 readEntries되고 한 번에 최대 100 개의 항목 만 반환됩니다.

Promises ( await/ async)를 사용하여 readEntries(비동기 적이므로) 올바른 사용법을보다 명확하게 보여주고 BFS (Broadth-First Search)를 사용하여 디렉터리 구조를 탐색합니다.

// Drop handler function to get all files
async function getAllFileEntries(dataTransferItemList) {
  let fileEntries = [];
  // Use BFS to traverse entire directory/file structure
  let queue = [];
  // Unfortunately dataTransferItemList is not iterable i.e. no forEach
  for (let i = 0; i < dataTransferItemList.length; i++) {
    queue.push(dataTransferItemList[i].webkitGetAsEntry());
  }
  while (queue.length > 0) {
    let entry = queue.shift();
    if (entry.isFile) {
      fileEntries.push(entry);
    } else if (entry.isDirectory) {
      queue.push(...await readAllDirectoryEntries(entry.createReader()));
    }
  }
  return fileEntries;
}

// Get all the entries (files or sub-directories) in a directory 
// by calling readEntries until it returns empty array
async function readAllDirectoryEntries(directoryReader) {
  let entries = [];
  let readEntries = await readEntriesPromise(directoryReader);
  while (readEntries.length > 0) {
    entries.push(...readEntries);
    readEntries = await readEntriesPromise(directoryReader);
  }
  return entries;
}

// Wrap readEntries in a promise to make working with readEntries easier
// readEntries will return only some of the entries in a directory
// e.g. Chrome returns at most 100 entries at a time
async function readEntriesPromise(directoryReader) {
  try {
    return await new Promise((resolve, reject) => {
      directoryReader.readEntries(resolve, reject);
    });
  } catch (err) {
    console.log(err);
  }
}

Codepen의 전체 작업 예제 : https://codepen.io/anon/pen/gBJrOP

FWIW 나는 받아 들인 대답을 사용할 때 40,000 개의 파일 (100 개가 넘는 파일 / 하위 디렉토리를 포함하는 많은 디렉토리)이 포함 된 디렉토리에서 예상 한 모든 파일을 가져 오지 않았기 때문에 이것을 선택했습니다.

선적 서류 비치:

이 동작은 FileSystemDirectoryReader에 문서화되어 있습니다. 강조가 추가 된 발췌 :

readEntries () 일부 디렉토리 항목을
포함하는 배열을 반환 합니다 . 배열의 각 항목은 FileSystemEntry (일반적으로 FileSystemFileEntry 또는 FileSystemDirectoryEntry)를 기반으로하는 개체입니다.

그러나 공정하게 말하면 MDN 문서는 다른 섹션에서 이것을 더 명확하게 할 수 있습니다. readEntries () 문서는 단순히 노트 :

readEntries () 메소드는 읽고있는 디렉토리 내의 디렉토리 항목을 검색하여 제공된 콜백 함수에 배열로 전달합니다.

그리고 여러 호출이 필요하다는 유일한 언급 / 힌트는 successCallback 매개 변수 에 대한 설명입니다 .

남아있는 파일이 없거나이 FileSystemDirectoryReader에서 이미 readEntries ()를 호출 한 경우 배열이 비어 있습니다.

틀림없이 API는 더 직관적 일 수 있지만 문서에서 알 수 있듯이 표준 트랙이 아닌 비표준 / 실험적 기능이며 모든 브라우저에서 작동 할 것으로 기대할 수 없습니다.

관련 :

• johnozbay 는 Chrome에서 readEntries디렉토리에 대해 최대 100 개의 항목을 반환 할 것이라고 설명 합니다 (Chrome 64로 확인 됨).
• XanreadEntries 은이 답변 에서 코드가 없지만 올바른 사용법을 설명합니다 .
• Pablo Barría Urenda의 답변 은 readEntriesBFS없이 비동기 방식으로 올바르게 호출 됩니다. 그는 또한 Firefox가 디렉토리의 모든 항목을 반환하지만 (Chrome과 달리) 사양이 주어지면이를 신뢰할 수 없다고 지적합니다.