Angular JS文件上传使用Angular文件上传-限制文件类型,大小
Angular-JS File Upload using angular-file-upload - Limiting File Types, Size
对于文件上传,我使用以下模块: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)可以放在文件放置区域
-文件大小有限
显然可以使用过滤器,但找不到任何例子。
查看源代码中有关如何使用过滤器的一些示例(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>
相关文章:
- 使用Angular和Node上传文件
- 使用Angular js-量角器e2e测试上传文件
- Angular JS文件上传到托管服务器
- Angular 2:在本地.json文件上找不到文件
- 使用angular js在前端下载文件
- 使用相同的上传器angular上传多个文件
- Angular.js-$http.get-使用文件中的缓存
- 如何从配置文件中设置Angular值
- Angular http.get没有'我不喜欢在开头和结尾加方括号的文本文件
- 使用gulp-angular gettext从JS文件中提取字符串不起作用
- 先在Angular中加载配置文件,然后再加载其他文件
- 触发器<输入类型=“;文件“>用angular程序选择文件
- Angular/Ionic:将所有文本保存在一个单独的文件中
- 无法使用Angular JS和spring MVC打开下载文件
- 将angular javascript文件包装为“;(function(){..[js-code here]…})()&
- 使用angular$http和django-urlpatters来获得json文件
- 我想批量上传zip文件中的简历,并提取html5和angular中每个简历的内容
- 使用$http.get()-OAuth身份验证下载带有Angular的远程文件
- 需要一个文件中的文件-Angular | Node.js
- 在 HTML 中包含外部 Javascript 文件 - Angular 2