아래에 주어진 것처럼 단일 페이지에 여러 파일 입력이 있습니다.
<input data-file="cancelledCheque" name="cancelledCheque" type="file"
class="fileUpload" ng-file-select="onFileSelect($files)" accept=".jpg,.jpeg">
내 지시는 다음과 같습니다.
App.directive("ngFileSelect", function () {
return {
link: function ($scope, el) {
el.on('click', function () {
this.value = '';
});
el.bind("change", function (e) {
$scope.file = (e.srcElement || e.target).files[0];
var allowed = ["jpeg", "jpg"];
var found = false;
var img;
$scope.filevaliderror = false;
img = new Image();
allowed.forEach(function (extension) {
if ($scope.file.type.match('' + extension)) {
found = true;
$('.filevaliderror').css('display', 'none');
}
});
if (!found) {
//alert('file type should be .jpeg, .jpg');
$('.filevaliderror').css('display', 'block');
return;
}
img.onload = function () {
//var dimension = $scope.selectedImageOption.split(" ");
//if (dimension[0] == this.width && dimension[2] == this.height) {
allowed.forEach(function (extension) {
if ($scope.file.type.match('' + extension)) {
found = true;
$('.filevaliderror').css('display', 'none');
}
});
if (found) {
if ($scope.file.size <= 4194304) {
$scope.getFile();
$('.filevaliderror').css('display', 'none');
} else {
//alert('file size should not be greater then 4 Mb.');
//$scope.file.value = "";
//$scope.filevaliderror = true;
$('.filevaliderror').css('display', 'block');
}
} else {
//alert('file type should be .jpeg, .jpg,');
//$scope.filevaliderror = true;
$('.filevaliderror').css('display', 'block');
}
//} else {
// alert('selected image dimension is not equal to size drop down.');
//}
};
img.src = URL.createObjectURL($scope.file);
});
}
};
이제 내가 직면 한 문제는 단일 업로드가 오류를 표시 할 때 클래스를 사용하고 있기 때문에 모든 입력이 오류를 표시하므로 동일한 지시문을 사용하여 오류를 고유하게 표시하려면 어떻게해야합니까?
아래는 내 스팬입니다.
<span class="filevaliderror" style="padding-top:4px; color:#af0e0e">Upload a valid File</span>
오류 요소는 지시문의 마크 업 외부에 있기 때문에 조작하기가 어렵습니다. 지시문 이 다음 file input과 error block같이 모두 감싸도록 하십시오.
<div ng-select-file>
<input type="file"/>
<span ng-show="error">{{error}}"</span>
</div>
그런 다음 error범위 의 속성을 변경하여 오류를 표시하거나 숨 깁니다 .
link: function ($scope, el) {
el.find('input').bind('change', function (e) {
var file = (e.srcElement || e.target).files[0];
$scope.error = '';
// validate input and show errors...
var isValid = false;
if (!isValid) {
$timeout(function(){
$scope.error = 'Wrong file type';
});
}
});
}
이것이 각진 방법입니다.
작동하는 기본 샘플 : https://jsfiddle.net/aleckravets/awuLh6gu/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다