angularjsの$ http.postに異なるデータを渡す方法は？

Question

http：//www.post を使って、私はusernameとform_dataオブジェクトをPHPファイルに渡したいと思います。しかし、私は同様にユーザー名のようないくつかの他の情報を渡したいと思います。他のデータをhttp.postに渡す方法を教えてください。 ここに私のPHPファイルがあります。

<?php include "connectdb.php"; $data=json_decode(file_get_contents("php://input")); 

$name=$dbhandle->real_escape_string($data->susername); if(!empty($_FILES)){ $date=2; 

$path = 'fooditem/'. $_FILES['file']['name']; 
if(move_uploaded_file($_FILES['file']['tmp_name'],$path)){ 

$query="INSERT INTO `login`(`id`,`type`,`img`) VALUES('".$name."','".$date."','".$_FILES['file']['name']."')"; 

    if($dbhandle->query($query)){ 
     echo 'File Uploaded'; 
    } 
    else 
     echo 'File Uploaded But Not Saved'; 
}}else{ 
echo 'Some Error';} 

myapp.directive("fileInput",function($parse){ 
 
      return{ 
 
       link: function($scope,element,attrs){ 
 
        element.on("change",function(event){ 
 
         var files = event.target.files; 
 
         $parse(attrs.fileInput).assign($scope, element[0].files); 
 
         $scope.$apply(); 
 
         // console.log(files[0].name); 
 
        }); 
 
       } 
 
      } 
 
     }); 
 
     
 
     
 
     
 
     myapp.controller("myController",function($scope,$http){ 
 
      
 
      
 
      $scope.signup = function(){ 
 
       
 
      var form_data = new FormData(); 
 
       angular.forEach($scope.files,function(file){ 
 
        form_data.append('file',file); 
 
       }); 
 
      $http.post("picupload.php",{'susername':$scope.susername,form_data}) 
 
        .success(function(response){ 
 
        alert(response); 
 
\t \t })     
 
      } 

<input type="text" ng-model="username" name="username"> 
 
<input type="file" file-input="files" accept="image/*" /> 
 
<input type="submit" value="SIGN UP" ng-click="signup()" name="signup_btn" class="btn btn-primary">

Answer 1

あなたはこのような何かを追加することができます。

myapp.controller("myController",function($scope,$http){ 
     $scope.signup = function(){  
     var form_data = new FormData(); 
     angular.forEach($scope.files,function(file){ 
       form_data.append('file',file); 
     }); 
     form_data.append('susername',$scope.susername); // new line 
     var config = {headers: { 'Content-type': undefined } }; 
     $http.post("picupload.php",form_data, config) 
       .success(function(response){ 
       alert(response); 
     });     
} 

私はPHPについてはよく分からないが、グーグルでの後、私はPHPのsusername "で検索したことが判明しました以下のようになります。

$_POST['susername']; 

Answer 2

FormData APIで作成したオブジェクトを転記する場合は、Content-typeヘッダーをundefinedに設定することが重要です。

$scope.signup = function(){ 

    var form_data = new FormData(); 
     angular.forEach($scope.files,function(file){ 
      form_data.append('file',file); 
    }); 

    form_data.append('susername', $scope.susername); 

    var config = {headers: { 'Content-type': undefined } }; 

    return $http.post("picupload.php",form_data, config) 
     .then(function(response){ 
     console.log(response.data); 
     return response.data; 
    });     
}; 

またFormData objectは、それだけではXHR APIで送信する必要がありますJSON stringにシリアライズすることはできません。必要なすべてのデータをFormDataオブジェクトに追加します。

XHR send API

ポストFormData APIによって作成されたオブジェクトは、それが自動的に適切なencapsulation boundaryとmultipart/form-dataにコンテンツタイプヘッダを設定しbase64 encodingを用いてデータを符号化します。

通常、$http serviceは、XHR APIをオーバーライドして、コンテンツタイプヘッダーをapplication/jsonに設定します。コンテンツタイプヘッダをundefinedに設定すると、XHR APIはヘッダを適切に設定できるようになります。