如何在AngularJS中限制附件(文件上传)的大小？

Question

我想要在AngularJS中上传带有加载图像的文件的最佳方法.同时我想将大小限制为10MB.

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

Answer 1

虽然这个问题有些陈旧,但我仍然认为为那些寻求它的人提供最好的答案是值得的.上面的答案依赖于jQuery的表面方面,但让我们使用适合Angular开发的样式.

在这里,当我被问到相同的问题时,我会参考实际的图书馆作者自己的建议,根据上面问题中提到的大小来改变它:

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

上面更新的示例:反映angular-file-uploadAPI的变化.

请注意,这取决于文件的size属性(Blob大小,以字节为单位),仅现代浏览器(即IE10及更高版本)支持.

Answer 2

你可以使用这个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

Answer 3

看看这个例子你就会明白

HTML 代码：

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

脚本：

$(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中了