个人中心
gpt4 book ai didi

javascript - d'n'd 如何通过 Ajax 传输文件(或文件夹)？

转载 作者：行者123 更新时间：2023-11-28 01:06:57 25 4
gpt4 key购买 nike

我想通过 AJAX 将文件夹上传到服务器。但是，我在上传文件时遇到了麻烦。

我使用 e.dataTransfer.items 和 webkitGetAsEntry() 来检查 - 它是文件还是文件夹？

如果它是文件，在函数 traverseFileTree 中我得到了文件，但是我不能将它附加到formData。

如果我使用 e.dataTransfer.files，我不知道它是什么。文件或文件夹，因为 webkitGetAsEntry() 出错。

我做错了什么？如何将文件传输到全局数组 $_FILES。

来源(upload.php):

echo "<pre>";
print_r ($_FILES);
echo "</pre>";

来源(index.html):

<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<style>
body {
    background: rgba(211,211,100, .5);
    font: 20px Arial;
}

.dropzone {
    width: 300px;
    height: 300px;
    border: 2px dashed #aaa;
    color: #aaa;
    line-height: 280px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
}

.dropzone.dragover {
    color: green;
    border: 2px dashed #000;
}
</style>
</head>
<body>
<p>Loaded files:</p>
<div id="uploads">
    <ul>

    </ul>
</div>
<div class="dropzone" id="dropzone">Drop files</div>
<script>

(function() {
    var formData = new FormData();
    var dropzone = document.getElementById("dropzone");

    dropzone.ondrop = function(e) {
        this.className = 'dropzone';
        this.innerHTML = 'Drop files';
        e.preventDefault();
        upload(e.dataTransfer.items);
    };

    function traverseFileTree(item, path) {
        path = path || "";
        if (item.isFile) {
            item.file(function(file) {
                console.log(file);                  // show info
                formData.append('file[]', file);    // file exist, but don't append
            });
        } /*else if (item.isDirectory) {
            var dirReader = item.createReader();
            dirReader.readEntries(function(entries) {
                for (var i=0; i<entries.length; i++) {
                    traverseFileTree(entries[i], path + item.name + "/");
                }
            });
        }*/
    } 


    var upload = function(items) {
        var xhr = new XMLHttpRequest();

        for(var i = 0; i < items.length; i++) {
            var item = items[i].webkitGetAsEntry();
            if (item) {
                traverseFileTree(item,'');
            }
        }

        xhr.onload = function() {
            console.log(this.responseText);
        };

        xhr.open('post', 'upload.php');
        xhr.send(formData);
    };

    dropzone.ondragover = function() {
        this.className = 'dropzone dragover';
        this.innerHTML = 'Mouse up';
        return false;
    };

    dropzone.ondragleave = function() {
        this.className = 'dropzone';
        this.innerHTML = 'Drop files';
        return false;
    };

})();
</script>

最佳答案

file() 和readEntries() 都异步返回结果。由于无法确定有多少文件或目录(这些文件或目录本身可能包含包含更多文件或文件夹的其他目录)将被用户选择和删除，因此对 traverseFileTree 的单个或递归调用需要某种机制来确定所有异步操作何时完成。这可以使用多种方法中的一种或多种来实现。

目前的方法递增变量n，将每个单独的文件推送到数组uploads。如果n为0，处理第一个文件；递增 n 使其值 1 大于包含文件 .length 的数组，直到数组 .length 相等到 n - 1 

  uploads.length === n - 1 || n === 0

然后使用.slice()复制uploads数组，设置uploads.length和n为0，将文件数组传递给函数 processFiles，其中文件附加到 FormData() 对象，调用 XMLHttpRequest()制作完成。

<!DOCTYPE html>
<html>

<head>
  <title>Drag and Drop</title>
  <style>
    body {
      background: rgba(211, 211, 100, .5);
      font: 20px Arial;
    }

    .dropzone {
      width: 300px;
      height: 300px;
      border: 2px dashed #aaa;
      color: #aaa;
      line-height: 280px;
      text-align: center;
      position: absolute;
      left: 50%;
      margin-left: -150px;
      top: 50%;
      margin-top: -150px;
    }

    .dropzone.dragover {
      color: green;
      border: 2px dashed #000;
    }
  </style>
</head>

<body>
  <p>Loaded files:</p>
  <div id="uploads">
    <ul>

    </ul>
  </div>
  <div class="dropzone" id="dropzone">Drop files</div>
  <script>
    (function() {
      var n = 0, uploads = [];

      var dropzone = document.getElementById("dropzone");

      dropzone.ondrop = function(e) {
        this.className = 'dropzone';
        this.innerHTML = 'Drop files';
        e.preventDefault();
        upload(e.dataTransfer.items);

      };

      function processFiles(files) {
        console.log("files:", files);
        alert("processing " + files.length + " files");
        var formData = new FormData();
        // append files to `formData`
        for (file of files) {
          formData.append("file[]", file, file.name)
        }
        // check `formData` entries
        var curr = 0;
        for (data of formData.entries()) {
          console.log("formData entry " + curr, data);
          ++curr;
        }
        delete curr;
        // do ajax stuff here
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
        console.log(this.responseText);
        };

        xhr.open("POST", "upload.php");
        xhr.send(formData);
      }

      function traverseFileTree(item, path) {

        var handleFiles = function handleFiles(item, path) {
          path = path || "";
          if (item.isFile) {
            item.file(function(file) {
              uploads.push(file); 
              console.log(file, n, uploads.length); // show info
              if (uploads.length === n - 1 || n === 0) {
                alert("traverseFiles complete, uploads length: " 
                      + uploads.length);
                var files = uploads.slice(0);
                n = uploads.length = 0;
                processFiles(files)
              } 
            });
          } else if (item.isDirectory) {
            var dirReader = item.createReader();
            dirReader.readEntries(function(entries) {
              // increment `n` here
              n += entries.length;
              for (var i = 0; i < entries.length; i++) {
                handleFiles(entries[i], path + item.name + "/");
              }
            });
          }
        }

        handleFiles(item, path);

      }

      var upload = function(items) {

        if (n !== 0 && uploads.length !== 0) {
          n = uploads.length = 0;
        }

        for (var i = 0; i < items.length; i++) {
          var item = items[i].webkitGetAsEntry();
          if (item) {
            traverseFileTree(item, "");
          }
        }

      };

      dropzone.ondragover = function() {
        this.className = 'dropzone dragover';
        this.innerHTML = 'Mouse up';
        return false;
      };

      dropzone.ondragleave = function() {
        this.className = 'dropzone';
        this.innerHTML = 'Drop files';
        return false;
      };

    })();
  </script>
</body>
</html>

plnkr http://plnkr.co/edit/OdFrwYH2gmbtvHfq3ZjH?p=preview

另见 How can I filter out directories from upload handler in Firefox? , How to read files from folder

关于javascript - d'n'd 如何通过 Ajax 传输文件(或文件夹)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39347822/

25 4 0
文章推荐： php - 源码与 "inspect element"的区别
文章推荐： javascript - 如何将图像或图标添加到 JQuery Accordion 的 h3 标签中
文章推荐： javascript - 在 Handlebars 中使用从 api 加载的自定义助手
文章推荐： python - django:从返回结果列表链接到详细信息页面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com