web-dev-qa-db-ja.com

AngularJSで添付ファイル（ファイルのアップロード）のサイズを制限するにはどうすればよいですか？

AngularJSで画像をロードしてファイルをアップロードする最良の方法が欲しいです。同時に、サイズを10MBに制限したいと思います。

これを達成するための最良の方法を教えてください。

angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeatangular-ui
14
prince

この質問は少し古いですが、それでも、それを求める人に可能な限り最良の答えを提供することは価値があると私は思います。上記の答えは表面的な面ではjQueryに依存していますが、Angularの開発にはスタイルフィッティングを使用します。

ここでは、同じ質問をしたときに 実際のライブラリ作成者自身の推奨事項 を参照し、上記の質問で質問したサイズに変更します。

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以降）でのみサポートされています。

10
runderworld

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