在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中设置文件输入的最大大小

回答

相关问题