如何使用輸入文件序列化表單？

Question

我有形式textarea的和：

<input type="file" name="files" file-input="files" multiple /> 

如何serialiaze這種形式，並使用與textarea的價值和文件發送AJAX：

我試着這樣說：

$scope.send = function(data) { 

      var path = $filter('sprintf')(paths.comment.send, $scope.issue.project.id, $scope.issue.campaign.id, $scope.issue.id); 

      var formData = new FormData(); 

      angular.forEach($scope.files, function(value, key) { 
       formData.append(key, value); 
      }); 

      formData .append('body', $scope.comment.body); 

      $http({ 
        method: 'POST', 
        url: path, 
        transformRequest: angular.identity, 
        headers: { 
         'Content-Type': 'multipart/form-data', 
         'X-CSRF-Token': $('meta[name=csrf-token]').attr('content') 
        }, 

        data: formData 
       }) 

       .then(function(data) { 
        console.log(data); 

       }, 

       function(response) { 
        console.log(response); 
       }); 

     }; 

但它確實不起作用

Answer 1

當發送由FormData API創建的formData對象時，重要的是將內容類型標題設置爲undefined。

var formData = new FormData(); 

    angular.forEach($scope.files, function(value, key) { 
     formData.append(key, value); 
    }); 

    formData .append('body', $scope.comment.body); 

    $http({ 
      method: 'POST', 
      url: path, 
      transformRequest: angular.identity, 
      headers: { 
       //'Content-Type': 'multipart/form-data', 
       //USE content type undefined 
       'Content-Type': undefined, 
       'X-CSRF-Token': $('meta[name=csrf-token]').attr('content') 
      }, 

      data: formData 
     }) 

通常情況下，服務$http將內容類型設置到application/json。內容類型標題爲undefined時，內容類型由XHR send method設置。

在這種情況下，XHR API需要包含內容類型標頭的encapsulation boundary。當XHR API被迫使用不帶encapsulation boundary的內容類型頭時，它與formData對象「不起作用」。