Angular-JS 文件上传使用 angular-file-upload - 限制文件类型、大小答案

【问题标题】：Angular-JS File Upload using angular-file-upload - Limiting File Types, SizeAngular-JS 文件上传使用 angular-file-upload - 限制文件类型、大小
【发布时间】：2014-11-01 01:24:09
【问题描述】：

对于文件上传，我使用以下模块： https://github.com/nervgh/angular-file-upload

html sn-p 看起来像：

    <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>

我如何确保：
- 只能将图像 (png/jpg) 拖放到文件放置区域？
- 文件大小有限。

显然可以使用过滤器 - 但找不到任何示例。

【问题讨论】：

标签： javascript html angularjs file-upload

【解决方案1】：

查看源代码以获取有关如何使用过滤器的一些示例 (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});

队列限制过滤器 (https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L357)

FileUploader.prototype._queueLimitFilter = function() {
    return this.queue.length < this.queueLimit;
};

文件夹过滤器 (https://github.com/nervgh/angular-file-upload/blob/master/src/module.js#L349)

FileUploader.prototype._folderFilter = function(item) {
    return !!(item.size || item.type);
};

基于这些示例，我猜过滤器可以这样使用：

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

<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>

【讨论】：