通过XMLHttpRequest从HTML5文件系统上传文件

Question

尝试上传一些存储在Google Chrome文件系统中的图片。 但是我无法上传图片。 任何想法怎么做？

服务器收到一个空数组。 posttest.php的代码只是print_r（$ _ POST）

 var xhr = new XMLHttpRequest();
    xhr.open('POST', '/posttest.php', true);
    xhr.onload = function(e) {
        if (this.status == 200) {
            console.log(this.responseText);
        }
    };
    window.resolveLocalFileSystemURL(image, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(e) {
                var formData = new FormData();
                formData.append('image', this.result);
                xhr.send(formData);
            };
            reader.readAsText(file);
        });
    });

Answer 1

这是在chrome中为我工作的Javascript函数

 function upload(filename) { var xhr = new XMLHttpRequest(); xhr.open("post", "upload.php", true); window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL; filename = 'filesystem:http://localhost/temporary/' + filename; window.resolveLocalFileSystemURL(filename, function(fileEntry) { fileEntry.file(function(file) { xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("X-File-Name", file.name); xhr.setRequestHeader("X-File-Size", file.size); xhr.setRequestHeader("X-File-Type", file.type); xhr.send(file); }); }); } 

现在，大多数人都跳过了upload.php，这是理所当然的。 但这非常重要，因此我将其粘贴在此处：

 <?php // I had to figure out what is getting passed using var_dump($_SERVER) $fn = (isset($_SERVER['HTTP_X_FILE_NAME']) ? $_SERVER['HTTP_X_FILE_NAME'] : false); if ($fn) { // AJAX call file_put_contents( 'uploads/' . $fn, file_get_contents('php://input') ); echo "$fn uploaded"; exit(); } ?> 

希望这对某人有帮助，我浪费了一整天来解决这个问题！

Answer 2

首先，您的评论并不完全正确，PHP代码甚至不应该包含斑点。 它只是在接收文本，因为您以文本形式读取文件，而png图像（以及几乎所有图像类型）都不应该是文本，而应该是二进制。 而且Blob本身非常适合存储二进制数据，因此您甚至不需要使用FileReader ，您只需通过XMLHttpRequest发送Blob本身即可！

这是修改后的fileEntry.file回调函数的外观：

fileEntry.file(function(file) {
    xhr.send(file);
});

就这么简单！ 无需阅读Blob。 但是，您现在需要在PHP方面做更多的事情。 此代码会将上传的图像的内容写入磁盘，然后创建一个<img>元素，使您可以查看它。 这是PHP /posttest.php查找方式：

<?php
$rhand=fopen('php://input','r');
$cont=fread($rhand,filesize('php://input'));
fclose($rhand);
$whand=fopen('./uploaded.png','w');
fwrite($whand,$cont);
fclose($whand);
?>
<img src="uploaded.png">

如果您知道php://input是php将从POST请求中获取输入的地方（如果它没有允许将其轻松放入$_POST的MIME类型），那么应该很清楚该怎么做（例如，当您$_POST MIME类型为application/x-www-form-urlencoded的请求时，PHP会识别该请求，并能够将POST内容解析为$_POST ，但是对于Blob，它不会，因此只会将其输出的php://input ）

请注意，这些内容均未经过测试，如果无法使用，请发表评论，我会尝试修复它！

Answer 3

我自己也遇到了同样的挑战，所以我提出了一个非常时尚的解决方案。 关键是从fileEntry返回的文件对象创建一个新的Blob。

window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL;

    window.resolveLocalFileSystemURL(image, function (fileEntry) {
        fileEntry.file(function (file) {
            var formData = new FormData();
            var tempBlob=new Blob([this.result], {type:this.result.type});
            formData.append('image', tempBlob);

        });
    });