2

我正在寻找一种使用 Ajax Post 上传文件夹的方法。我发现的帖子（cp. File Entries from drop event）回答了如何获取文件条目，但是当我发布它们时，服务器只接收文件名。不是数据。现在我正在寻找一种实际加载文件的方法。由于我是 js 新手，我不知道如何前进。

我发现的剪辑是这样的：

       // 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);
      }
    }

我的 drop 事件如下所示：

elDrop.addEventListener('drop', async function (event) {
            event.preventDefault();
            let items = await getAllFileEntries(event.dataTransfer.items);
            elItems.innerHTML = items.length;
            $.ajax({
                type: 'POST',
                url: '{% url 'user:upload' %}',
                dataType: "application/binary",
                data: items,
                success: function () {
                    alert('success')
                }
            });
        });
4

0 回答 0