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

Question

我想要在AngularJS中上傳帶有加載圖片的文件的最佳方式。同時我想將大小限制爲10MB。

請給出實現此目的的最佳方法？

Answer 1

看到這個例子中，你得到一些想法

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

Answer 2

雖然這個問題是有點老了，我仍然認爲值得爲那些尋求的人提供最好的答案它。上面的答案依賴於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及更高版本）的支持。

Answer 3

您可以使用此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 4

這是我使用這兩個指令的文件拉到到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> 

Answer 5

使用指令

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

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