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函数

＆＃13;

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

＆＃13;

现在大多数人都跳过了upload.php，认为这是理所当然的。但这非常重要，所以我把它贴在这里：

＆＃13;

<?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();	
	}
?>

＆＃13;

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

Answer 2

首先，您的评论不完全正确，PHP代码甚至不应该接收blob。它只是接收文本，因为你将文件作为文本读取，而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请求获得输入的地方，如果它没有允许它轻松地将它放入{{1 （例如，当你有一个MIME类型为$_POST的请求时，PHP会识别它并且能够将POST内容解析为application/x-www-form-urlencoded，但是使用Blob，它不会，所以它只是从$_POST）输出

请注意，这些都没有经过测试，如果不起作用请发表评论，我会尝试修复它！

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

        });
    });

通过XMLHttpRequest从HTML5 Filesystem上传文件

3 个答案: