上传的二进制文件，并保存它就像一个Excel服务器

Question

我有一个JavaScript函数，用于读取Excel文件并返回我的对象​​ArrayBuffer在document.getElementById("content").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文件中。

我该怎么办？

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

的JavaScript：

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

    } 

角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（它的工作原理！）：

角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（发送文件名）： 角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。您可以POSTFile对象到服务器，并使用fopen()，"php://input"，file_get_contents()在php，看Trying to Pass ToDataURL with over 524288 bytes Using Input Type Text

Answer 2

当使用AngularJS $ HTTP服务发送文件的blob，内容类型头设置为原始值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服务将内容类型标头设置为application/json。通过将内容类型标题设置为undefined，XHR Send Method将标题设置为适当的值。