简体   繁体   中英

Angular JS couldn't send form data with file-data together

Novice in angularjs. I have a form in which one input field have type file. Remaining all are text and select fields. I want, when i submit form, all form data including file data should post together. Here is my code, please review.

//html

<input type="file" name="student_image" onchange="angular.element(this).scope().uploadFile(this.files)" ng-model="formData.studentImage" id="student_image">

//JS

var from_data = new FormData();
$scope.uploadFile = function (files) {
        from_data.append("file", files[0]);
};
$scope.submit = function () {
        from_data.append('fullname',$scope.formData.studentFullname);
        from_data.append('fullname',$scope.formData.studentEmail);
        from_data.append('class',$scope.formData.studentClass);
        $http({
            method: 'POST',
            url: 'process.php',
            enctype: 'multipart/form-data',
            processData: false,
            data: from_data, // pass in data as strings
            headers: {'Content-Type': false}  // set the headers so angular passing info as form data (not request payload)
        }).success(function (data) {
            console.log(data);
        });
    };

There are no enctype and processData properties. You also need to prevent JSON serialization. The following should work:

$http({
        method: 'POST',
        url: 'process.php',
        data: from_data, 
        headers: {'Content-Type': undefined},
        transformRequest: angular.identity, //to prevent JSON serialization
    }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM