jQuery 使用angularjs上传多个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17037979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
uploading multiple files with angularjs
提问by Mahen
i want to upload multiple files using angular js, but it is like limited number of files and each with specific validation, hence cant use "multiple". Using multiple controls one for each file..
我想使用 angular js 上传多个文件，但它就像有限数量的文件，每个文件都有特定的验证，因此不能使用“多个”。为每个文件使用多个控件。
below is the sample code
下面是示例代码
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.filelist = ['file1','file2']
});
app.directive("fileBind", function() {
return function( scope, elm, attrs ) {
elm.bind("change", function( evt ) {
scope.$apply(function() {
scope[ attrs.fileBind ] = evt.target.files;
});
});
};
});
the corrposponding html is:
对应的 html 是：
<div ng-controller="MainCtrl">
<div ng-repeat="myfile in filelist">
<input type="file" file-bind="files" />
</div>
<div ng-repeat="file in files">
<pre>{{ file | json }}</pre>
</div>
</div>
I have also made a plunker for it: http://plnkr.co/edit/DF2WYU
我也为它做了一个plunker：http://plnkr.co/edit/DF2WYU
but this is not working... if i use $index or anything to store all the files uploaded, the directive stops working...
但这不起作用......如果我使用 $index 或任何东西来存储上传的所有文件，该指令将停止工作......
any help is appriciated
任何帮助是appriciated
回答by danial
Not sure where the problem is but I have put together a simple/light angular directive with polyfill for browsers not supporting HTML5 FormData here:
不确定问题出在哪里，但我在这里为不支持 HTML5 FormData 的浏览器放置了一个带有 polyfill 的简单/轻量角指令：
https://github.com/danialfarid/angular-file-upload
https://github.com/danialfarid/angular-file-upload
It is very similar to what you do here using a directive listening to change event. Then you can call added prototype to $http "uploadFile" to upload that file to the server via ajax. For IE it would load up a flash file to simulate the same thing.
它与您在此处使用监听更改事件的指令所做的非常相似。然后您可以调用添加的原型到 $http "uploadFile" 以通过 ajax 将该文件上传到服务器。对于 IE，它会加载一个 Flash 文件来模拟同样的事情。
Here is the working demo: http://angular-file-upload.appspot.com/
这是工作演示：http: //angular-file-upload.appspot.com/
<script src="angular.min.js"></script>
<script src="angular-file-upload.js"></script>
<div ng-controller="MyCtrl">
<input type="text" ng-model="myModelObj">
<input type="file" ng-file-select="onFileSelect($files)" >
</div>
controller:
控制器：
$http.uploadFile({
url: 'my/upload/url',
data: {myObj: $scope.myModelObj},
file: $file
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
回答by Fabio Bonfante
I'm not sure about your intention looking the code (sorry not much time...) anyway a single html tag input-file can contain a list of files,see https://developer.mozilla.org/en-US/docs/Web/API/FileList
我不确定您是否打算查看代码（抱歉没有太多时间......）无论如何，单个 html 标签输入文件可以包含文件列表，请参阅 https://developer.mozilla.org/en-US/文档/Web/API/文件列表
Given that you can try with this answerappending more files to the FormData
鉴于您可以尝试使用此答案将更多文件附加到 FormData
