it-swarm.com.ru

Как я могу ограничить размер вложения (загрузки файла) в AngularJS?

Я хочу лучший способ загрузки файлов с загрузкой изображения в AngularJS. В то же время я хочу ограничить размер до 10 МБ.

Пожалуйста, дайте лучший способ достичь этого?

13
prince

Хотя этот вопрос несколько устарел, я все же думаю, что стоит дать наилучший ответ тем, кто его ищет. Ответ выше опирается на jQuery для поверхностных аспектов, но давайте использовать стиль, подходящий для разработки на Angular.

Здесь я ссылаюсь на собственную рекомендацию автора библиотеки когда задают тот же вопрос, изменяя его на размер, заданный в вопросе выше:

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

ПРИМЕР ОБНОВЛЕНО ВЫШЕ:, чтобы отразить изменения в API angular-file-upload.

Обратите внимание, что это зависит от атрибута файла size ( размер BLOB-объекта в байтах ), который поддерживается только современными браузерами (а именно IE10 и выше).

10
runderworld

Вы можете использовать эту библиотеку:

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

Посмотрите этот пример, вы получите представление 

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

4
Murugan Pandian

Это директива, которую я использую для перетаскивания файла в область видимости 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
CountZero

Используйте директиву

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

 });                
}          
 });    
 }   
};
}]);
0
Imran Kabir