设置angularjs中文件输入的最大大小 [英] set max size for file input in angularjs
问题描述
我已经使用html文件输入来选择要上传的文件.我创建了一个角度指令.现在，我想设置允许输入的最大文件大小.如果文件大小大于允许的大小，则应通过指令返回错误.我是angularjs的新手，对指令一无所知.如果有人知道解决方案并附有解释，将不胜感激.
I have used html file input to select file for uploading. I have created a angular directive. Now I want to set max allowed file size for input. If file size is greater then allowed size, error should be returned by directive. I'm new in angularjs and don't know much about directive. If anyone knows the solution with explanation, it will be appreciated.
到目前为止，这是我的代码.
Here is my code till now.
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>
这篇关于设置angularjs中文件输入的最大大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
