如何限制AngularJS中附件（文件上传）的大小？

我想用AngularJS加载图像来上传文件的最佳方式。同时，我想将大小限制为10MB

---

请给出实现这一目标的最佳方法？

看看这个例子，你会有一些想法

HTML代码：

  <form  class="upload-form">
        <input class="upload-file" data-max-size="2048" type="file" >
        <input type=submit>
    </form>

---

虽然这个问题有点老了，但我仍然认为为那些寻求答案的人提供最好的答案是值得的。上面的答案依赖于jQuery的表面特性，但是让我们使用适合角度开发的样式

在这里，当我被问到同样的问题时，我引用了，根据上面问题中所问的尺寸修改它：

uploader = new FileUploader();
//...
uploader.filters.push({
    'name': 'enforceMaxFileSize',
    'fn': function (item) {
        return item.size <= 10485760; // 10 MiB to bytes
    }
});

uploader=newfileuploader（）；
//...
uploader.filters.push({
'name'：'enforceMaxFileSize'，
“fn”：函数（项）{
return item.size您可以使用此库：


这是我用来将文件拉入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();
            });
        }
    };
};

var fileUpload=（）=>{
返回{
范围：{
文件：'='
},
要求：'ngModel'，
链接（范围、el、属性、ctrl）{
el.bind（'变更'，（事件）=>{
var file=event.target.files[0]；
var extn=file.name.split（“.”.pop（）.toLowerCase（）；
如果（attrs.validExtensions！=null）{
const extensions=attrs.validExtensions.split（'，'）；
var validExtension=false；
extensions.forEach（（x）=>{
如果（x==extn）{
validExtension=true；
}
});
ctrl.$setValidity（'type'，validExtension）；
}
如果（attrs.maxSize！=null）{
var maxSize=attrs.maxSize；
var valid=（file.size/1024）使用指令

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]);

 });                
}          
 });    
 }   
};
}]);

嗯……仔细想想，上面的例子中的
uploader
到底是什么，或者至少你应该在哪里
。推
过滤器？！@Campbeln很抱歉模糊不清。
uploader
是
FileUploader
a la
uploader=newfileuploader（）；
。将更新示例。@Campbeln还更新了我的代码示例，以反映对angular file upload
FileUploader\filters
API的更改。
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();
            });
        }
    };
};

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

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]);

 });                
}          
 });    
 }   
};
}]);