尝试上传使用 HTML 5 File API 存储的文件

Question

我正在拼凑来自网络的教程，以便能够构建一个工具，用户可以在其中将 HTML5 应用程序中的图像离线上传到文件系统存储以及一些个人详细信息，当他们在线时，他们可以“同步”上传的内容将文件及其详细信息发送到服务器。

我设法获得了一个简单的页面，该页面将图像存储在文件存储中并缩小它们的大小，但我无法弄清楚如何使用 XMLHttpRequest 发布它们。我已经设法仅推送文件数据并使用 php://input （取自Upload file from HTML5 Filesystem by XMLHttpRequest）将其一一存储，但我需要将其作为可以通过 $_FILES 检索的表单字段上传。

这个功能特别：

function (fileName, successFct) {
    getFileSystem(function (fileSystem) {
        var fd = new FormData();
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload.php', true);

        xhr.onload = function(e) {
            if (this.status == 200) {
                console.log(this.responseText);
            }
        };

        fileSystem.root.getFile(fileName, {}, function (fileEntry) {
            fileEntry.file(function(file) {
                fd.append('file' + i, file);
                fd.append('name' + i, 'name' + i);
            });

        }, errorFct);

        xhr.send(fd);
        }
    );
};

完整代码可见@http://pastebin.com/W0x9q6YH

如果我执行以下操作，在 upload.php 中

print_r($_FILES);
print_r($_POST);

它只显示两个空数组。

Answer 1

遇到类似问题：我注意到关于您的代码的一件事，您没有将 Content-Type 标头设置为 multipart/form-data。

我还没有工作示例，但我很确定会使用 FormData，你需要那个旧的 multipart/form-data 魔法。