背景 我使用ng-file-upload上传多个文件或文件，最大大小为15MB。当一个超过大小限制的文件被添加到文件列表中时，我设法让我的代码显示/隐藏错误。但是，我一直在想办法让我的代码在加载时检测多个文件的总和。
问题 有没有办法让我在HTML和我的指令中干净利落地完成这项工作而不添加太多额外功能？
代码是开发环境。
JS
.directive('jobApplication', function(Upload,$location,$anchorScroll){
return{
scope: {
job: '='
},
templateUrl: '/havaswwau/static/views/workforus/job-application.html',
controller: ['$scope', '$http', 'Upload', '$location', '$anchorScroll', function($scope, $http, Upload, $location, $anchorScroll) {
$scope.formSubmited = false;
$scope.submitted = false;
$scope.submit = function(files, valid) {
$scope.submitted = true;
// Honeypot captcha
if($scope.captcha !== undefined) {
return false;
}
if(valid && $scope.name !== undefined && $scope.email !== undefined && $scope.tandc !== undefined){
var jobTitle;
if($scope.job !== undefined){
jobTitle = $scope.job;
}else {
jobTitle = "Pro-Active";
}
if (files && files.length) {
// Send files alongside the form data
// check https://github.com/danialfarid/ng-file-upload#-usage as a reference
Upload.upload({
url: '/umbraco/api/Upload/UploadFileToServer',
data: {file: files, jobAppliedFor: jobTitle, name: $scope.name, email: $scope.email, tellUsAboutYourself: $scope.desc}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data);
$scope.formSubmited = true;
// workaround to play the checkmark animation on IE, which doesn't support strokeDashoffset CSS animation
if (window.navigator.userAgent.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
{
var p, offset;
setTimeout(function(){
p = document.getElementsByClassName('checkmark__check');
offset = 48;
},200);
setTimeout(function(){
offsetMe();
},400);
var offsetMe = function () {
p[0].style.strokeDashoffset = offset;
offset--;
if (offset > 0) {
requestAnimationFrame(offsetMe);
} else {
return false;
}
};
}
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
$scope.progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + $scope.progressPercentage + '% ' + evt.config.data.file.name);
});
}else {
// regular POST without any file to upload
var data = {
files: "",
jobAppliedFor: jobTitle,
name: $scope.name,
email: $scope.email,
tellUsAboutYourself: $scope.desc
};
var request = {
method: 'POST',
url: '/umbraco/api/Upload/UploadFileToServer',
data: data,
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
formData.append(key, value);
});
var headers = headersGetter();
delete headers['Content-Type'];
return formData;
},
headers: {
'Content-Type': undefined
}
};
$http(request).success(function(data, status) {
$scope.formSubmited = true;
}).error(function (err) {
console.log(err);
});
}
}
};
}]
}; }）
HTML
<div class="cbp-mc-column">
<input id="captcha" type="text" name="captcha" ng-model="captcha" size="25" value="" />
<input type="text" id="first_name" ng-class="{'input-error': form.first_name.$error.required && submitted}" name="first_name" placeholder="NAME" ng-model="name" ng-maxlength="80" required>
<div class="form-errors" ng-if="form.first_name.$error.required && submitted" ng-cloak>
This field is required.
</div>
<textarea id="desc" name="desc" ng-model="desc" placeholder="TELL US ABOUT YOURSELF"></textarea>
<div id="tandc" class="hideMobile hideTablet">
<input type="checkbox" id="tcbox" ng-class="{'input-error': form.tandc.$error.required && submitted}" name="tandc" ng-model="tandc" required>
<!-- <label for="tcbox">By submitting my details I agree to the <a href="/privacy-policy/" title="Privacy Policy">Privacy Policy</a></label> -->
<label for="tcbox">I have read the <a ui-sref="main.privacy" title="Privacy Policy" target="_blank">Havas Privacy Collection Statement</a> and agree to my personal information being treated in the manner stated and to receiving future communications from Havas and its promotional partners, including electronically.</label>
<div class="clearfix form-errors privacy-error" ng-if="form.tandc.$error.required && submitted" ng-cloak>
You need to agree with the Privacy Collection Statement to continue.
</div>
</div>
</div>
<div class="cbp-mc-column">
<input type="email" ng-class="{'input-error': (form.email.$error.required || form.email.$error.email) && submitted}" id="email" name="email" ng-model="email" placeholder="EMAIL" ng-minlength="6" ng-pattern="/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*(\+[a-zA-Z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>
<div class="form-errors" ng-if="form.email.$error.required && submitted" ng-cloak>
This field is required.
</div>
<div class="form-errors" ng-if="form.email.$error.email && submitted" ng-cloak>
Enter a valid email.
</div>
<div ngf-select ngf-drop ng-model="files" ngf-keep="true" ngf-multiple="true" ngf-pattern="'image/*,application/pdf,.doc,.docx,.xls,.txt,.xlsx,.csv'" ngf-max-total-size="15MB" ngf-max-size="15MB" name="files" class="dropzone">
</div>
<div class="files-wrapper">
<div class="files-refence" ng-repeat="file in files track by $index">
{{file.name}} <div ng-click="files.splice($index, 1)" ng-show="files" class="icon icon-close-thin"> </div>
</div>
</div>
<!--progress bar -->
<div class="loading">
<div class="progress">
<div class="progress_bar" ng-style="{'width': progressPercentage + '%'}" ng-show="progressPercentage >= 0">
</div>
</div>
</div>
<div class="clearfix form-errors privacy-error" ng-show="form.files.$error.maxTotalSize">
Your attachments cannot exceed 15MB.<br><br>
</div>
<div class="clearfix form-errors privacy-error" ng-show="form.files.$error.maxSize">
Your attachment cannot exceed 15MB.<br><br>
</div>
<!--progress bar end-->
<div id="tandc" class="showMobile showTablet">
<input type="checkbox" id="tcbox" ng-class="{'input-error': form.tandc.$error.required && submitted}" name="tandc" ng-model="tandc" required>
<!-- <label for="tcbox">By submitting my details I agree to the <a href="/privacy-policy/" title="Privacy Policy">Privacy Policy</a></label> -->
<label for="tcbox">I have read the <a ui-sref="main.privacy" title="Privacy Policy" target="_blank">Havas Privacy Collection Statement</a> and agree to my personal information being treated in the manner stated and to receiving future communications from Havas and its promotional partners, including electronically.</label>
<div class="clearfix form-errors privacy-error" ng-if="form.tandc.$error.required && submitted" ng-cloak>
You need to agree with the Privacy Collection Statement to continue.<br><br>
</div>
</div>
<div class="cbp-mc-submit-wrap"><button class="cbp-mc-submit" type="submit" ng-click="submit(files, form.$valid)">SUBMIT <span class="icon icon-chevron-light"></span></button></div>
</div>
</form>
<div class="formSubmited" ng-if="formSubmited">
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
<div class="cvsent">APPLICATION SENT <br> THANK YOU</div>
</div>
<a ng-if="formSubmited" href="" ui-sref="main.home" class="returnHome">
<span class="icon icon-chevron-left"></span> <span class="link-home">RETURN HOME</span>
</a>
<div ng-if="formSubmited" class="bottom-separator"> </div>