使用angular-file-upload上傳Angular-JS文件-限制文件類型，大小

Question

對於文件上傳，我正在使用以下模塊： https : //github.com/nervgh/angular-file-upload

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>

我如何確保：
-只能將圖像（png / jpg）拖放到文件放置區域嗎？
-文件大小受到限制。

顯然可以使用過濾器-但找不到任何示例。

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