Angularjs如何上传多部分表单数据和文件？
我是一个初学者angular.js，但我有一个很好的基本知识。
我正在做的是上传一个文件和一些表格数据作为多部分forms的数据。 我读到，这不是一个angular度的function，但第三方库可以完成这项工作。 我已经通过git克隆了angular度file upload，但是我仍然无法发布一个简单的表单和文件。
有人可以请提供一个例子，HTML和JS如何做到这一点？
首先
- 你不需要任何特殊的结构变化。 我的意思是：htmlinput标签。
<input accept="image/*" name="file" ng-value="fileToUpload" value="{{fileToUpload}}" file-model="fileToUpload" set-file-data="fileToUpload = value;" type="file" id="my_file" /> 这是相当必要的项目演示页的副本，并显示上传表单上传单上的file upload进度。
(function (angular) { 'use strict'; angular.module('uploadModule', []) .controller('uploadCtrl', [ '$scope', '$upload', function ($scope, $upload) { $scope.model = {}; $scope.selectedFile = []; $scope.uploadProgress = 0; $scope.uploadFile = function () { var file = $scope.selectedFile[0]; $scope.upload = $upload.upload({ url: 'api/upload', method: 'POST', data: angular.toJson($scope.model), file: file }).progress(function (evt) { $scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total, 10); }).success(function (data) { //do something }); }; $scope.onFileSelect = function ($files) { $scope.uploadProgress = 0; $scope.selectedFile = $files; }; } ]) .directive('progressBar', [ function () { return { link: function ($scope, el, attrs) { $scope.$watch(attrs.progressBar, function (newValue) { el.css('width', newValue.toString() + '%'); }); } }; } ]); }(angular));
HTML
<form ng-submit="uploadFile()"> <div class="row"> <div class="col-md-12"> <input type="text" ng-model="model.fileDescription" /> <input type="number" ng-model="model.rating" /> <input type="checkbox" ng-model="model.isAGoodFile" /> <input type="file" ng-file-select="onFileSelect($files)"> <div class="progress" style="margin-top: 20px;"> <div class="progress-bar" progress-bar="uploadProgress" role="progressbar"> <span ng-bind="uploadProgress"></span> <span>%</span> </div> </div> <button button type="submit" class="btn btn-default btn-lg"> <i class="fa fa-cloud-upload"></i> <span>Upload File</span> </button> </div> </div> </form>
编辑：增加了传递一个模型，直到文件夹中的服务器。
input元素中的表单数据将在post的数据属性中发送，并以常规表单值的forms提供。
直接发送文件效率更高。
Content-Type: multipart/form-data的base64编码会额外增加33％的开销。 如果服务器支持，则直接发送文件效率更高：
直接从FileList执行多个$http.post请求
$scope.upload = function(url, fileList) { var config = { headers: { 'Content-Type': undefined }, transformResponse: angular.identity }; var promises = fileList.map(function(file) { return $http.post(url, file, config); }); return $q.all(promises); };
使用File对象发送POST时，设置'Content-Type': undefined非常重要'Content-Type': undefined 。 XHR发送方法将检测File对象并自动设置内容types。
与ng-model一起使用的“files-input”指令的工作演示1
<input type=file>元素默认不使用ng-model指令 。 它需要一个自定义指令 ：
angular.module("app",[]); angular.module("app").directive("filesInput", 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="angular/angular.js"></script> <body ng-app="app"> <h1>AngularJS Input `type=file` Demo</h1> <input type="file" files-input ng-model="fileList" multiple> <h2>Files</h2> <div ng-repeat="file in fileList"> {{file.name}} </div> </body>
- 如何使用POSTMAN同时发出多个请求
- Web部署任务失败。 （“Microsoft.Web.Deployment.DeploymentManager”的types初始值设定项引发exception。）
- 根据另一个集合中是否存在特定文档，将集合中的文档发布到meteor客户端（publish-with-relations）
- MS Visual Studio：如何从发布中排除某些项目文件夹？
- 使用msbuild指定解决scheme的项目文件
- 使用msbuild执行文件系统发布configuration文件
- 如何发布依赖于maven中的第三方SNAPSHOT项目的项目
- 使用MSBuild.exe在发布模式下构buildC＃解决scheme
- 从HttpServletRequest中检索JSON对象
