'use strict';
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.val1 = 'Sr. Python Developer';
$scope.val2 = 'Jr. Python Developer';
$scope.val3 = 'Sr. UI Developer';
$scope.val4 = 'Jr. UI developer';
$scope.val5 = 'Sr. Android Developer';
$scope.val6 = 'Jr. Android Developer';
$scope.val7 = 'Sr. Tester';
$scope.val8 = 'Jr. Tester';
$scope.val9 = 'Sr. Devops Engineer';
$scope.val10 = 'Graphic designer';
$scope.submitForm = function() {
console.log('clicked')
$scope.resume = document.getElementById('resume').files[0];
var promise = $http({
method: 'POST',
url: 'contactus.php',
data: {
'name': $scope.name,
'phone': $scope.phone,
'experience': $scope.experience,
'email': $scope.email,
'position': $scope.position,
'resume': $scope.resume
},
headers: {
'Content-Type': 'application/json'
}
});
promise.then(function(response) {
var request = response.data;
if (request.success == "true") {
alert("Thank you for getting in touch with Mohar");
var inst = $('[data-remodal-id=modal]').remodal();
inst.close();
$scope.name = '';
$scope.phone = '';
$scope.experience = '';
$scope.email = '';
$scope.position = val
$scope.resume = '';
$scope.userForm.$setPristine();
$scope.userForm.$setUntouched();
} else {
alert("Please try after sometime");
window.location.href = 'career.html';
}
});
}
});
app.directive('validFile', ['$parse', function($parse) {
return {
require: 'ngModel',
link: function(scope, el, attrs, ngModel) {
//change event is fired when file is selected
el.bind('change', function() {
//file type validation
let file = event.target.files[0];
if (file.type == 'application/pdf' || file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.type == 'application/msword') {
if (file.size <= 1024000) {
console.log('file success', file);
//enable submit button
scope.$apply(function() {
ngModel.$setViewValue(el.val());
ngModel.$render();
})
} else {
console.log('file size too large')
}
} else {
console.log('not supported file type');
}
})
}
}
}]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<form name="userForm" class="job-form" autocomplete="off">
<div class="row">
<div class="form-group">
<input type="text" class="form-control form-control-payment" ng-model="name" name="name" id="name" ng-pattern="/^[a-zA-Z ]*$/" ng-minlength="1" ng-maxlength="20" placeholder="Full Name" required />
<div ng-show="userForm.name.$dirty && userForm.name.$invalid || userForm.name.$touched">
<p ng-show="userForm.name.$error.required">Please enter name</p>
<p ng-show="userForm.name.$error.pattern">Please enter valid name</p>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-payment" ng-model="phone" name="phone" id="number" ng-pattern="/^[0-9]*$/" ng-minlength="10" ng-maxlength="10" placeholder="Phone Number" required />
<div ng-show="userForm.phone.$dirty && userForm.phone.$invalid || userForm.phone.$touched">
<p ng-show="userForm.phone.$error.required">Please enter contact number</p>
<p ng-show="userForm.phone.$error.minlength">Please enter minimum 10 digit</p>
<p ng-show="userForm.phone.$error.maxlength || userForm.phone.$error.pattern">Please enter valid contact number</p>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-payment" ng-model="experience" name="experience" id="experience" ng-pattern="/^[0-9]*$/" placeholder="Experience" required />
<div ng-show="userForm.experience.$dirty && userForm.experience.$invalid || userForm.experience.$touched">
<p ng-show="userForm.experience.$error.required">Please enter total experience</p>
<p ng-show="userForm.experience.$error.pattern">Please enter only numbers</p>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-payment" name="email" ng-model="email" id="email" placeholder="E-mail" required />
<div ng-show="userForm.email.$dirty && userForm.email.$invalid || userForm.email.$touched">
<p ng-show="userForm.email.$error.required">Email is required.</p>
<p ng-show="userForm.email.$error.email">Invalid email address.</p>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-payment" id="position" ng-model="position" ng-readonly="true" placeholder="Position" required />
<!-- <input type="text" class="form-control" id="position" placeholder="e.g: UI DEVELOPER" required> -->
</div>
<div class="form-group">
<!-- <label for="resume">Upload Resume <span>*</span></label> -->
<input type="file" class="form-control form-control-payment" valid-file ng-model="resume" id="resume" required>
</div>
<button type="submit" class="btn btn-submit pull-right" ng-click="submitForm()" ng-disabled="userForm.$invalid">Submit</button>
</div>
</form>
你好，我正在使用angularjs进行验证＆amp; HTTP调用。我想上传一个包含其他表单数据的文件，如姓名，电话，电子邮件和电子邮件。文件。我做了所有验证，检查文件大小，文件类型等＆amp;其他基本验证＆amp;它工作正常。但是当我提交数据时，它会发送一个空文件。我不明白这段代码有什么问题请帮忙。先感谢您。