如何使用AngularJS

时间:2015-11-23 11:15:23

标签: javascript json angularjs form-data

我是angular-js的新手,想要使用图像提交multipart / form-data,而$ http.post()方法只支持json格式,所以我想将formdata对象转换为json格式,

$scope.SubmitForm=function()
{
    url = siteurl + '/admin/' + $scope.module + '/add';

    var form=document.getElementById("addForm");
    var formData=new FormData(form);

    $http({
        url     :   url,
        method  :   "POST",
        data    :   formData,
    })
    .then(function(responseText) {                
        alert(JSON.stringify(responseText));

    //process data
    },function(){
        alert("hello from error");
    });

} 
它对我没用;我试图为此制作json格式数据并且工作正常

formData={
    "first_name" :  $('#first_name').val(),
    "last_name"  :  $('#last_name'),
    //....
};

但不知道将我的图片文件附加到此格式;我该怎么做才能找到我的工作。

是否有任何方法(函数)将formdata对象转换为json格式

3 个答案:

答案 0 :(得分:1)

在处理角度表单时,您应该使用ng-model(您可以在示例中提供表单吗?)。它创建了一个范围变量,可以在你的控制器中使用,如果已经定义了你将有双向绑定...例如,因为你的表格不存在我做了这样的事情,这是简化的(未经测试)......:

<form name="myForm" ng-submit="SubmitForm()">
    Name: <input ng-model="fields.name">
    Address: <input ng-model="fields.address">
    ....
</form>

并在你的JS控制器......

 $scope.submitForm = function(){    
        var data = $scope.fields,
            url = '/admin/' + $scope.module + '/add'; // I assume $scope.module is available from elsewhere...  

        $http.post(url, data).then(function(resp){
        // do stuff...

        });        
    }

此处有更多信息...... https://docs.angularjs.org/api/ng/directive/ngModel和W3schools有一些例子:http://www.w3schools.com/angular/angular_forms.asp

答案 1 :(得分:0)

通过在$ http配置行中放置两行代码来解决(感谢每个人) -

      $http({
            url     :   url,
            method  :   "POST",
            data    :   formData,
            transformRequest: angular.identity, // see the angugular js documentation
            headers : {'Content-Type':undefined}// setting content type to undefined that change the default content type of the angular js
        }).then(function(responseText){

            alert(JSON.stringify(responseText));
            ///$scope.tablerows=$scope.totaltablerows;
            ///$scope.searchFunction();
        },function(){
            alert("hello from error");
        });

这就是我的作品

答案 2 :(得分:-1)

它应该像这样构建:

  var form = document.getElementById('addForm');
  var fd = new FormData(form);
  var file = this.files[0];    
  fd.append("afile", file);
  // These way you add extra parameters
  fd.append("first_name", $('#first_name').val());
  fd.append("last_name", $('#last_name').val());

参考示例 - from github