设置文件输入的最大大小 [英] Set max size for file input
问题描述
我使用HTML文件输入来选择要使用自定义AngularJS指令上传的文件.现在，我要设置输入的最大允许文件大小.如果文件大小大于允许的大小，则伪指令应返回错误.有人可以解释我该怎么做吗?
I have used HTML file input to select a file for uploading using a custom AngularJS directive. Now I want to set the max allowed file size for the input. If the file size is greater than the allowed size, then an error should be returned by the directive. Can someone explain how I can do this?
这是我当前的代码:
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>
JS
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();
});
});
}
}
});
推荐答案
采取一些自由并稍微改变了指令的实现，因为您只是将文件的路径绑定到ng-model而不是文件数据.文件大小检查(最大2000字节)，可以根据需要进行更改.这是工作中的 plunker .
Took some liberty and changed your directive implementation a little bit as you are just binding the path of the file to your ng-model instead of file data.Also added the file size check (Max 2000 Bytes) which can changed as preferred. Here is the working 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>
这篇关于设置文件输入的最大大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
