AngularJS：如何实现一个简单的file upload与多部分forms？
我想从AngularJS做一个简单的多部分表单发布到一个node.js服务器，表单应该包含一个部分的JSON对象和另一部分的图像（我目前只发布带有$资源的JSON对象）
我想我应该开始inputtypes=“文件”，但后来发现，AngularJS不能绑定到..
我能find的所有例子都是用于拖放jQuery插件的。 我想简单地上传一个文件。
我是AngularJS的新手，对编写自己的指令感到不舒服。
一个真正的工作解决scheme，没有其他依赖关系比angularjs（用v.1.0.6testing）
HTML
<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> Angularjs（1.0.6）不支持“input文件”标签上的ng-model ，所以你必须以“本地方式”来传递用户所有（最终）select的文件。
调节器
$scope.uploadFile = function(files) { var fd = new FormData(); //Take the first selected file fd.append("file", files[0]); $http.post(uploadUrl, fd, { withCredentials: true, headers: {'Content-Type': undefined }, transformRequest: angular.identity }).success( ...all right!... ).error( ..damn!... ); };
很酷的部分是未定义的内容types和transformRequest：angular.identity ，它们赋予$ httpselect正确的“内容types”和pipe理处理多部分数据时所需的边界的能力。
你可以使用简单/轻量级的ng-file-upload指令。 它支持使用FileAPI flash shim对非HTML5浏览器进行拖放，文件处理和file upload
<div ng-controller="MyCtrl"> <input type="file" ngf-select="onFileSelect($files)" multiple> </div>
JS：
//inject angular file upload directive. angular.module('myApp', ['ngFileUpload']); var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) { $scope.onFileSelect = function($files) { Upload.upload({ url: 'my/upload/url', file: $files, }).progress(function(e) { }).then(function(data, status, headers, config) { // file is uploaded successfully console.log(data); }); }];
我刚刚有这个问题。 所以有几种方法。 首先是新的浏览器支持
var formData = new FormData();
按照这个链接到博客，有关如何支持仅限于现代浏览器的信息，但否则它完全解决了这个问题。
否则，您可以使用target属性将表单发布到iframe。 发布表单时，请务必将目标设置为iframe，并将其显示属性设置为none。 目标是iframe的名称。 （只是你知道）
我希望这有帮助
我知道这是一个迟到的条目，但我已经创build了一个简单的上传指令。 你可以在任何时候工作！
<input type="file" multiple ng-simple-upload web-api-url="/api/post" callback-fn="myCallback" />
ng-simple-upload在Github 上更多地使用Web API的例子。
你可以通过$resource来上传，通过将数据分配给资源actions params属性如下：
$scope.uploadFile = function(files) { var fdata = new FormData(); fdata.append("file", files[0]); $resource('api/post/:id', { id: "@id" }, { postWithFile: { method: "POST", params: fdata, transformRequest: angular.identity, headers: { 'Content-Type': undefined } } }).postWithFile(fdata).$promise.then(function(response){ //successful },function(error){ //error }); };
直接发送文件效率更高。
Content-Type: multipart/form-data的base64编码会额外增加33％的开销。 如果服务器支持，则直接发送文件效率更高：
$scope.upload = function(url, file) { var config = { headers: { 'Content-Type': undefined }, transformResponse: angular.identity }; return $http.post(url, file, config); };
使用File对象发送POST时，设置'Content-Type': undefined非常重要'Content-Type': undefined 。 XHR发送方法将检测File对象并自动设置内容types。
要发送多个文件，请参阅从FileList直接执行多个$http.post请求
我想我应该开始inputtypes=“文件”，但后来发现，AngularJS不能绑定到..
<input type=file>元素默认不使用ng-model指令 。 它需要一个自定义指令 ：
与ng-model一起使用的“files-input”指令的工作演示1
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="fileArray" multiple> <h2>Files</h2> <div ng-repeat="file in fileArray"> {{file.name}} </div> </body>
我只是写了一个简单的指令（来自现有的），用于AngularJs中的一个简单的上传器。
（确切的jQuery上传插件是https://github.com/blueimp/jQuery-File-Upload ）
一个简单的上传器使用AngularJs（与CORS实现）
（虽然服务器端是为PHP的，你也可以简单地改变它的节点）
我想补充一个select。 利用angular度file upload。 你可以find一个解释：
你可以在这里find详细的解释： https ： //github.com/nervgh/angular-file-upload例如： https ： //github.com/nervgh/angular-file-upload/tree/master/examples/simple
