11
A
回答
4
看到这个例子中,你得到一些想法
HTML代码:
<form class="upload-form">
<input class="upload-file" data-max-size="2048" type="file" >
<input type=submit>
</form>
SCRIPT:
$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');
$('.upload-form').submit(function(e){
if(fileInput.get(0).files.length){
var fileSize = fileInput.get(0).files[0].size; // in bytes
if(fileSize>maxSize){
alert('file size is more than ' + maxSize + ' bytes');
return false;
}else{
alert('file size is correct - '+fileSize+' bytes');
}
}else{
alert('Please select the file to upload');
return false;
}
});
});
它已经在jsfiddle
7
虽然这个问题是有点老了,我仍然认为值得为那些寻求的人提供最好的答案它。上面的答案依赖于jQuery的肤浅方面,但让我们使用适合Angular开发的样式。
在这里,我引用actual library author's own recommendation当问同样的问题,改变它在上面的问题问大小:
uploader = new FileUploader();
//...
uploader.filters.push({
'name': 'enforceMaxFileSize',
'fn': function (item) {
return item.size <= 10485760; // 10 MiB to bytes
}
});
上面的例子更新:以反映更改angular-file-upload
API。
请注意,这依赖于文件的size
属性(Blob size in bytes),仅受现代浏览器(即IE10及更高版本)的支持。
5
您可以使用此lib目录下:
https://github.com/danialfarid/ng-file-upload
ngf-min-size='10' // minimum acceptable file size in bytes
ngf-max-size='1000' // maximum acceptable file size in bytes
0
这是我使用这两个指令的文件拉到到Angulars范围,验证文件的大小和验证扩展。
var fileUpload =() => {
return {
scope: {
file: '='
},
require: 'ngModel',
link(scope, el, attrs, ctrl) {
el.bind('change', (event) => {
var file = event.target.files[0];
var extn = file.name.split(".").pop().toLowerCase();
if (attrs.validExtensions != null) {
const extensions = attrs.validExtensions.split(',');
var validExtension = false;
extensions.forEach((x) => {
if (x === extn) {
validExtension = true;
}
});
ctrl.$setValidity('type', validExtension);
}
if (attrs.maxSize != null) {
var maxSize = attrs.maxSize;
var valid = (file.size/1024) <= maxSize;
ctrl.$setValidity('size', valid);
} else {
console.log('max size ScriptNotifyEvent set');
}
scope.file = file ? file : undefined;
scope.$apply();
});
}
};
};
HTML
<input type="file" file="File1" id="File1" name="File1" ng-model="File1" valid-extensions="doc,docx,xls,xlsx,pdf,tiff,zip,ppt,pptx" max-size="20000" />
<div class="alert alert-danger" ng-show="form.File1.$error.type && (form.File1.$touched || Submitted)" Role="alert">This form only allows the following file types: *.doc, *.docx, *.xls, *.xlsx, *.ppt, *.pptx, *.pdf, *.tiff, *.zip</div>
<div class="alert alert-danger" ng-show="form.File1.$error.size && (form.File1.$touched || Submitted)" Role="alert">The file is too large to send to us, please limit indivudual files to 20 megabytes.</div>
0
使用指令
ngApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function() {
var fileSize = this.files[0].size/1024;
if (fileSize > 600) {
alert("File size is larze; maximum file size 600 KB");
} else {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
});
}
});
}
};
}]);
相关问题
- 1. 如何限制上传文件大小?
- 2. MFMailComposeViewController附件文件大小限制
- 3. Docusign附件文件大小限制
- 4. DWR文件上传大小限制
- 5. PHP文件上传大小限制
- 6. 春季上传文件大小限制
- 7. Gerrit限制文件上传大小
- 8. 限制上传文件大小在PHP
- 9. AsyncFileUpload限制文件大小上传
- 10. 如何限制asp.net中的上传文件大小?
- 11. 如何限制PHP中的文件上传大小?
- 12. 如何在java servlet中限制上传的文件大小
- 13. 如何根据文件类型限制文件上传大小限制.htaccess
- 14. 如何在Wicket中限制上传文件大小
- 15. 如何在struts 2中指定上传文件大小限制?
- 16. 如何限制上传文件的大小apache + django
- 17. 如何限制用分割器上传时的文件大小?
- 18. 如何限制多部分文件上传中的文件大小?
- 19. 在asp中上传文件大小时可以限制文件大小吗?
- 20. flex文件上传器的文件大小限制
- 21. 多个文件上传的文件大小限制
- 22. iCloud邮件附件限制大小
- 23. Internet Explorer中最大文件大小上传限制是多少?
- 24. 如何限制用户上传jQuery的telerik上传零大小的文件?
- 25. 角JS文件上传 - 限制文件类型,大小
- 26. 评估文件上传器限制文件总大小?
- 27. 限制上传文件大小上传前用php://输入
- 28. 关于附件的大小限制?
- 29. PHP的邮件和文件附件大小限制
- 30. apache和gunicorn的最大(限制)上传文件大小
嗯......转念一想,这到底是'在上面的例子中uploader'或者至少你在哪里应该'.push'过滤器?! – Campbeln
@Campbeln抱歉,模糊不清。 'uploader'是'FileUploader'的一个实例''上传器=新的FileUploader();'。将更新示例。 – runderworld
@Campbeln也更新了我的代码示例以反映对角度文件上传FileUploader#filters API的更改。 – runderworld