javascript Nervgh Angular File Upload - 如何限制要上传的图像数量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22423181/
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
Nervgh Angular File Upload - How to limit the number of images to upload?
提问by Neel
I am just testing out this Angular module "Nervgh Angular File Upload" for file upload and so far I was able to get it to work as per the example given in the instruction which is great. This allows multiple uploads. Although I read through the properties and methods I can use, I still dont know how to limit the number of uploads to be allowed. For instance, in my form I dont want to allow users to upload more than 3 photos. How can I do that?
我只是在测试这个用于文件上传的Angular 模块“ Nervgh Angular File Upload”，到目前为止，我能够按照说明中给出的示例使其正常工作，这很棒。这允许多次上传。虽然我通读了我可以使用的属性和方法，但我仍然不知道如何限制允许的上传数量。例如，在我的表单中，我不想让用户上传超过 3 张照片。我怎样才能做到这一点？
ATM, I am using the following code as per the example given in the link above:
ATM，我按照上面链接中给出的示例使用以下代码：
<!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<title>Uploads only images (with canvas preview)</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<!-- Fix for old browsers -->
<script src="../bower_components/es5-shim/es5-shim.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!--<script src="../bower_components/angular/angular.js"></script>-->
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="../../angular-file-upload.js"></script>
<script src="controllers.js"></script>
<script src="directives.js"></script>
<style>
.my-drop-zone { border: dotted 3px lightgray; }
.ng-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }
html, body { height: 100%; }
canvas {
background-color: #f3f3f3;
-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
box-shadow: 3px 3px 3px 0 #e3e3e3;
border: 1px solid #c3c3c3;
height: 100px;
margin: 6px 0 0 6px;
}
</style>
</head>
<!-- 1. ng-file-drop | ng-file-drop="options" -->
<body ng-controller="TestController" ng-file-drop>
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="https://github.com/nervgh/angular-file-upload">Angular File Upload</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../simple">Simple example</a></li>
<li class="active"><a href="#">Uploads only images (with canvas preview)</a></li>
<li><a href="../without-bootstrap">Without bootstrap example</a></li>
</ul>
</li>
<li><a href="https://github.com/nervgh/angular-file-upload">View on Github</a></li>
<li><a href="https://raw.github.com/nervgh/angular-file-upload/master/angular-file-upload.min.js">Download</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
<div ng-show="uploader.isHTML5">
<!-- 3. ng-file-over | ng-file-over="className" -->
<div class="well my-drop-zone" ng-file-over>
Base drop zone
</div>
<!-- Example: ng-file-drop | ng-file-drop="options" -->
<div class="well my-drop-zone" ng-file-drop="{ url: '/foo' }" ng-file-over="another-file-over-class">
Another drop zone with its own settings
</div>
</div>
<!-- 2. ng-file-select | ng-file-select="options" -->
<input ng-file-select type="file" multiple />
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<h2>Uploads only images (with canvas preview)</h2>
<h3>The queue</h3>
<p>Queue length: {{ uploader.queue.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<strong>{{ item.file.name }}</strong>
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item.file, height: 100 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<p>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</p>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Does anyone know how to put a limit on the maximum number of file uploads that can be allowed in this form?
有谁知道如何限制此表单中允许的最大文件上传数量？
回答by aaafly
using angular-file-upload v1.0.2
使用角度文件上传 v1.0.2
There are predefined filters https://github.com/nervgh/angular-file-upload/wiki/Module-API#predefined-filters
有预定义的过滤器 https://github.com/nervgh/angular-file-upload/wiki/Module-API#predefined-filters
Predefined filters
预定义过滤器
- folder
- queueLimit
- 文件夹
- 队列限制
set the limit:
设置限制：
var uploader = new FileUploader({
queueLimit: 1
});
then in the view.
然后在视图中。
<element nv-file-drop filters="queueLimit"></element>
If you have set queueLimit to 1 but don't want it applied. Set the filters attribute to an empty string. When filters attribute is not set, all filters apply.
如果您已将 queueLimit 设置为 1 但不想应用它。将过滤器属性设置为空字符串。如果未设置过滤器属性，则所有过滤器都适用。
<element nv-file-drop filters=""></element>
I found that multiple filters must not be separated with a space like the doc suggest. Or else only the first filter apply.
我发现多个过滤器不能像文档建议的那样用空格分隔。否则只有第一个过滤器适用。
<element nv-file-drop filters="filterName1,filterName2"></element>
回答by Neel
I contacted the Module author on this and he was really kind in replying to my question. Here is his response on how we can limit the number of file uploads:
我就此联系了模块作者，他非常友好地回答了我的问题。以下是他对我们如何限制文件上传数量的回应：
You could use "ng-disabled" directive and filters of uploader https://github.com/nervgh/angular-file-upload/issues/67#issuecomment-35322492
您可以使用上传器的“ng-disabled”指令和过滤器https://github.com/nervgh/angular-file-upload/issues/67#issuecomment-35322492
回答by kristof
Following worked for me
以下对我来说有效
uploader = new FileUploader({
queueLimit: 1
});
