anglejsのファイル入力の最大サイズを設定しました

アップロードするファイルを選択するためにhtmlファイル入力を使用しました。私は角度指示を作成しました。今私は入力の最大許容ファイルサイズを設定したい。ファイルサイズが許容サイズを超えている場合は、ディレクティブによってエラーを返す必要があります。私はangularjsで新しく、ディレクティブについて多くは知らない。誰かが解説付きの解決策を知っているなら、それは認められるでしょう。anglejsのファイル入力の最大サイズを設定しました

ここまでは私のコードです。

HTML

<input type="file" id="flBook" name="flBook" valid-file required accept=".pdf" ng-model="ebook.file" ng-if="ebook.ebook_file.st_filename == undefined"> 
<span ng-if="formBook.$submitted || formBook.flBook.$touched" ng-cloak> 
    <span class="text-red" ng-show="formBook.flBook.$valid == false" ng-cloak>E-Book is required.</span> 
</span>

app.directive('validFile', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, el, attrs, ngModel) { 
      //change event is fired when file is selected 
      el.bind('change', function() { 
       scope.$apply(function() { 
        ngModel.$setViewValue(el.val()); 
        ngModel.$render(); 
       }); 
      }); 
     } 
    } 
});

出典

2016-10-04 Akshay Vaghasiya

チェックあなたのディレクティブに統合することができ、ファイルのAPI例えば、この質問 - http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation – shershen

@shershen、私が言ったように、私はangularjsで新しいです。ですから、私はangularjs命令にどのように統合するのか分かりません。だからあなたは例を挙げることができますか？ –

@ user3121072があなたに語ったオプションのために、新しい角度になっている人は - この設定可能なプラグインなど、準備が整ったディレクティブを試してみてください - https://github.com/danialfarid/ng-file-upload – shershen

ファイルのパスではなく、ファイルのパスをバインドするだけで、ディレクティブの実装が少し変更されました。ファイルサイズのチェック（最大2000バイト）を追加しました。好ましい。ここに働いてplunkerです。あなたのHTMLではJS

angular.module('myApp', ['ng']) 

    .directive('validFile', function($parse) { 
     return { 
      require: 'ngModel', 
      restrict: 'A', 
      link: function(scope, el, attrs, ngModel) { 
       var model = $parse(attrs.ngModel); 
       var modelSetter = model.assign; 
       var maxSize = 2000; //2000 B 
       el.bind('change', function() { 

        scope.$apply(function() { 
         scope.ebook.maxSizeError = false; 
         if (el[0].files.length > 1) { 
          modelSetter(scope, el[0].files); 
         } else { 
          modelSetter(scope, el[0].files[0]); 
         } 
         var fileSize = el[0].files[0].size; 
         if (fileSize > maxSize) { 
          scope.ebook.maxSizeError = true; 
         } 
        }); 
       }); 
      } 
     } 
    }) 
    .controller('Ctrl', ['$scope', function($scope) { 
     $scope.ebook = {};//scope object to hold file details 
     $scope.uploadDocs = function() { 
      var file = $scope.ebook.file; 
      console.log(file); 
     }; 
    }]);

で

変更指示

<body ng-controller="Ctrl"> 

    <input type="file" id="flBook" name="flBook" valid-file required accept=".pdf" ng-model="ebook.file" ng-if="ebook.ebook_file.st_filename == undefined"> 
    <span ng-if="formBook.$submitted || formBook.flBook.$touched" ng-cloak> 
    <span class="text-red" ng-show="formBook.flBook.$valid == false" ng-cloak>E-Book is required.</span> 
    </span> 
    <p ng-show="ebook.maxSizeError">Max file size exceeded (2000 bytes)</p> 
    <button ng-click="uploadDocs()">Upload</button> 
</body>

出典

2016-10-04 09:52:28

私はあなたが特定のサイズがに達したときに、アップロードを停止する設定するには、バックエンドが必要だと思います。フロントエンドのものには、すぐに使用できるディレクティブがいくつかあります。ちょうどangular upload file backendを検索してください。バックエンドについては、あなたがさらに役立つために使用するバックエンドを示す必要があります。

出典

2016-10-04 07:16:13 user3121072

ありがとう回答。しかし、私は 'ready to use directives 'を使いたくありません。ですから、angularjsディレクティブに何かを追加する必要があります。 –

anglejsのファイル入力の最大サイズを設定しました

答えて

関連する問題