在angularjs中設置文件輸入的最大大小

我已經使用html文件輸入來選擇要上傳的文件。我創建了一個角度指令。現在我想爲輸入設置最大允許的文件大小。如果文件大小大於允許大小，則應由指令返回錯誤。我是angularjs的新成員，對指令知之甚少。如果有人知道與解釋的解決方案，將不勝感激。在angularjs中設置文件輸入的最大大小

這是我的代碼，直到現在。

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

因爲你只是將文件的路徑綁定到你的ng模型而不是文件數據，所以取得了一些自由並改變了你的指令實現。還添加了文件大小檢查（Max 2000 Bytes），它可以改變爲首選。這是工作plunker。在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); 
     }; 
    }]);

更改指令在HTML

<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

感謝您的回答。但我不想使用'準備使用指令'。所以我必須在angularjs指令中添加一些內容。 –

在angularjs中設置文件輸入的最大大小

回答

相關問題