[英]Angular-JS File Upload using angular-file-upload - Limiting File Types, Size
For File Upload i am using following module: https://github.com/nervgh/angular-file-upload 对于文件上传,我正在使用以下模块: https : //github.com/nervgh/angular-file-upload
The html snippet looks like: html片段如下所示:
<div nv-file-drop="" uploader="uploader" options="{ url: '/whatever/uploadfile'}"
removeAfterUpload="true" >
<div nv-file-over="" uploader="uploader" over-class="another-file-over-class"
class="well my-drop-zone" >
You may drag drop files here
</div>
</div>
How can i ensure that: 我如何确保:
- only images (png/jpg) can be dropped on the file drop area? -只能将图像(png / jpg)拖放到文件放置区域吗?
- File Sizes are Limited. -文件大小受到限制。
Apparently filters could be used - but cannot find any example of that. 显然可以使用过滤器-但找不到任何示例。
Checkout the source code for some examples on how the filters are used ( https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L51 ) 请查看源代码,以获取有关如何使用过滤器的一些示例( https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L51 )
this.filters.unshift({name: 'queueLimit', fn: this._queueLimitFilter});
this.filters.unshift({name: 'folder', fn: this._folderFilter});
Queue limit filter ( https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L357 ) 队列限制过滤器( https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L357 )
FileUploader.prototype._queueLimitFilter = function() {
return this.queue.length < this.queueLimit;
};
Folder Filter ( https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L349 ) 文件夹过滤器( https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L349 )
FileUploader.prototype._folderFilter = function(item) {
return !!(item.size || item.type);
};
Based on those examples i guess the filters can be used as such: 根据这些示例,我猜想过滤器可以这样使用:
javascript JavaScript的
var uploadOptions = {
url: '/whatever/uploadfile',
filters: []
};
// File must be jpeg or png
uploadOptions.filters.push({ name: 'imagefilter', fn: function(item) {
return item.type == 'image/jpeg' || item.type == 'image/png';
}});
// File must not be larger then some size
uploadOptions.filters.push({ name: 'sizeFilter', fn: function(item) {
return item.size < 10000;
}});
$scope.uploadOptions = uploadOptions;
html HTML
<div nv-file-drop="" uploader="uploader" options="uploadOptions" removeAfterUpload="true" >
<div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone" >
You may drag drop files here
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.