通过XMLHttpRequest从HTML5文件系统上传文件 [英] Upload file from HTML5 Filesystem by XMLHttpRequest

问题描述

尝试上传Google Chrome文件系统中存储的一些图片。
但我无法上传图片。任何想法如何做到这一点？

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

$ p $ 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）;
}）;
}）;


解决方案

这是在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（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）;}）; }）;}  

现在大部分人都在跳过上传。 PHP认为它是理所当然的。但它是非常重要的，所以我把它贴在这里： div class =snippet-code> <？php //我必须弄清楚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'））;回声$ fn上传;出口（）;希望这可以帮助别人，我浪费了一个完整的一天来解决这个问题！

Trying to Upload some Images stored in Filesystem of Google Chrome. But Im not able to upload the Image. Any Idea how to do it?

The Server receives an empty array. The Code of posttest.php is just 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);
        });
    });

解决方案

this is the Javascript function that worked for me in chrome

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

}

Now most people on the skip the upload.php taking it for granted. But it is very important and so I paste it here:

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

Hope this helps someone, I wasted an entire day to figure this out !

这篇关于通过XMLHttpRequest从HTML5文件系统上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！