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

本文介绍了使用AngularJS进行文件上传的方法。首先对比了传统的表单提交方式,然后详细讲解了如何利用AngularJS实现文件上传功能,包括设置正确的Content-Type和transformRequest属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:传统的表单提交方式

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

二: angularjs处理文件上传

<form id="myForm">
    <input type="file" name="file" />
    <input type="text" name="username" />
    <input type="button" value="提交" ng-click="upLoad();" />
</form>
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.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值