AngularJs实现表单文件的上传(2.0版本以下)

一:传统的表单提交方式

"url" method="post" enctype="multipart/form-data"> type="file" name="file" /> type="text" name="username" /> type="submit" value="提交">

二: angularjs处理文件上传

"myForm">
    type="file" name="file" />
    type="text" name="username" />
    type="button" value="提交" ng-click="upLoad();" />
angular.module('myApp', [])
        .controller('myController', function($scope, $http) {
            var form = new FormData(document.getElementById("myForm"));
            $scope.upLoad = function() {
                $http({
                    url: "url",
                    method: "post",
                    data: form,
                    transformRequest: angular.identity,
                    headers: {
                        'Content-Type': undefined
                    }
                }).then(function(response) {
                    // 请求成功执行代码
                    alert("成功")
                }, function(response) {
                    // 请求失败执行代码
                    alert("失败")
                });
            }
        });

!注意

  1. 因为是通过anjularjs的http请求来上传文件的,所以要让当前的request成为一个Multipart/form-data请求,anjularjs对于post和get请求默认的Content-Type header 是application/json。
    所以,通过设置headers : {‘Content-Type’ : undefined}这样浏览器不仅帮我们把Content-Type 设置为 multipart/form-data,还填充上当前的boundary,如果你手动设置为: ‘Content-Type’: multipart/form-data,后台会抛出异常:the current request boundary parameter is null。
  2. 通过设置 transformRequest: angular.identity ,anjularjs transformRequest function 将序列化我们的formdata object.

你可能感兴趣的:(angularjs)