栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

AngularJS使用FormData API上传多个文件

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

AngularJS使用FormData API上传多个文件

如何使用$ http服务发布FormData

当使用FORMDATA API以POST文件和数据,它设定的是很重要的Content-Type头到

undefined

var fd = new FormData()for (var i in $scope.files) {    fd.append("fileToUpload", $scope.files[i]);}var config = {headers: {'Content-Type': undefined}};var httpPromise = $http.post(url, fd, config);

默认情况下,AngularJS框架使用内容类型

application/json
。通过设置
Content-Type:undefined
,AngularJS框架省略了内容类型标头,从而允许XHRAPI设置内容类型。发送FormData对象时,XHR API将内容类型设置为
multipart/form-data
具有适当的边界和base64编码。


您是如何获取文件信息的

$scope.files

如何启用
<input type="file">
与之合作
ng-model

该指令还可以

<input type="file">
自动使用
ng-change
and
ng-form
指令。

angular.module("app",[]);angular.module("app").directive("selectFilesNg", function() {  return {    require: "ngModel",    link: function postlink(scope,elem,attrs,ngModel) {      elem.on("change", function(e) {        var files = elem[0].files;        ngModel.$setViewValue(files);      })    }  }});<script src="//unpkg.com/angular/angular.js"></script>  <body ng-app="app">    <h1>AngularJS Input `type=file` Demo</h1>    <input type="file" select-files-ng ng-model="fileArray" multiple>    <pre><table ng-show="fileArray.length">    <tr><td>Name</td><td>Date</td><td>Size</td><td>Type</td><tr>    <tr ng-repeat="file in fileArray">      <td>{{file.name}}</td>      <td>{{file.lastModified | date  : 'MMMdd,yyyy'}}</td>      <td>{{file.size}}</td>      <td>{{file.type}}</td>    </tr>    </table></pre>  </body>

推荐:直接发布二进制文件

使用base64编码添加二进制文件

multi-part/form-data
效率很低,因为base64编码会增加33%的额外开销。如果服务器API接受带有二进制数据的POST,请直接发布文件。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/465799.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号