上传二进制文件并将其像Excel一样保存在服务器中

我有一个JavaScript函数，它读取一个excel文件，并在document.getElementById("content").value返回一个对象ArrayBuffer。value：

  <script type = "text/javascript"> function readFile(files){ console.log("DEntro de readFile"); var reader = new FileReader(); reader.readAsArrayBuffer(files[0]); reader.onload = function(event){ var arrayBuffer = event.target.result; array = new Uint8Array(arrayBuffer); binaryString = String.fromCharCode.apply(null, array); document.getElementById("fileContent").value = event.target.result; } } </script> 

所以，我想知道，我怎样才能把这个对象ArrayBuffer发送到服务器，并在服务器中保存这个ArrayBuffer在一个Excel文件生成原来的Excel。

我能做什么？

编辑我：我想我做错了什么，因为我创build的文件，但奇怪的字符，只有31个字节。

JavaScript的：

  function readFile(files){ var reader = new FileReader(); reader.readAsArrayBuffer(files[0]); reader.onload = function(event){ document.getElementById("fileContent").value = event.target.result; } } 

Angular JS使用这个函数，我用JSON发送数据到服务器：

  self.uploadFile = function(){ var data = { file : document.getElementById("fileContent").value, }; publicDataServices.sendData("http://gnsys.local/publico/test/up", data).then(function(response){ switch(parseInt(response.result)){ case 0: console.log("OK!!!"); break; case 3: //Error de Sistemas console.log("testControllers.js::uploadFile: Error de sistemas"); break; } }); } 

PHP：

  $params = json_decode(file_get_contents('php://input'),true); $property = new PropertyReader(); $fileRoute = $property->getProperty("scripts.ruta.querys"); $fileName = $fileRoute . "prueba.xls"; $input = fopen('php://input', 'rb'); $file = fopen($fileName, 'wb'); stream_copy_to_stream($input, $file); fclose($input); fclose($file); 

编辑II（它的工作！）：

Angular JS：

  self.uploadFile = function(){ publicDataServices.sendData("http://gnsys.local/publico/test/up", document.getElementById("file").files[0]).then(function(response){ switch(parseInt(response.result)){ case 0: console.log("OK!!!"); break; case 3: //Error de Sistemas console.log("testControllers.js::uploadFile: Error de sistemas"); break; } }); } 

PHP：

  $property = new PropertyReader(); $fileRoute = $property->getProperty("scripts.ruta.querys"); $fileName = $fileRoute . "prueba.xls"; $input = fopen('php://input', 'rb'); $file = fopen($fileName, 'wb'); file_get_contents and file_put_contents stream_copy_to_stream($input, $file); fclose($input); fclose($file); 

我只是知道如何获得原始的文件名。

编辑III（发送文件名）： Angular js：

  self.uploadFile = function(){ var promise = $q.defer(); var headers = { "file-name" : document.getElementById("file").files[0].name } $http.post("http://gnsys.local/publico/test/up", document.getElementById("file").files[0], {headers:headers}) .success(function(response, status, headers, config){ promise.resolve(response); console.log("resultado: " + response.result); }) .error(function(data){ //Error de sistemas console.log("Error en sendData: " + data) }) return promise.promise; } 

PHP：

  $property = new PropertyReader(); $fileRoute = $property->getProperty("scripts.ruta.querys"); $fileName = $fileRoute . "prueba.xls"; //With this foreach we get all the headers so I can detect which i the right header to get the file name foreach (getallheaders() as $name => $value) { $log->writeLog(get_class($this) . "::" . __FUNCTION__ . ": name: " . $name . " value: " . $value); } $input = fopen('php://input', 'rb'); $file = fopen($fileName, 'wb'); stream_copy_to_stream($input, $file); fclose($input); fclose($file); 

它完美的作品！

Answer 1

没有必要将File对象转换为ArrayBuffer 。 您可以将File对象发布到服务器，并在php使用fopen() ， "php://input" ， file_get_contents() ，请参阅尝试通过ToDataURL超过524288字节使用inputtypes文本

Answer 2

使用AngularJS $ http服务发送文件blob时，将内容types头设置为undefined的原始值非常重要。

 var config = { headers: { 'Content-Type': undefined } }; $http.post(url, file[0], config).then(function(response) { var data = response.data; var status = response.status; console.log("status: ", status); }); 

$ http服务通常将内容types头部设置为application/json 。 通过将内容types标题设置为undefined ， XHR发送方法将标题设置为适当的值。