Question

我有textarea的表格并且：

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

如何序列化此表单并使用以下命令发送带有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。它＆＃34;不起作用＆＃34;当XHR API被强制使用不带encapsulation boundary的内容类型标题时，使用formData个对象。

如何使用输入文件序列化表单？

1 个答案: