我们正在处理用户可以上传4张不同照片的表单。当我点击选择文件时,它正在调用upload.php文件并将该文件存储到uploadfiles目录中。
但是上传文件后无法将该特定文件名传递给angularjs。
这是UI代码
<head>
<script src="add-customer.js"></script>
<script type="text/javascript" src="angular-file-upload.js"> </script>
</head>
<body data-ng-cloak data-ng-app="AddCustomerApp" data-ng-controller="AddCustomerController as parentCtrl">
<section id="container">
<section id="main-content">
<section class="wrapper">
<div class="row mt">
<div class="col-lg-12">
<div class="form-panel">
<h4 class="mb">Add Customer</h4>
<form class="form-horizontal" role="form" id="AddCustomerForm" name="AddCustomerForm" autocomplete="off" enctype="multipart/form-data" novalidate="" data-ng-submit="AddCustomerData(AddCustomer)">
<div class="form-group">
<div class="col-sm-4">
<label for="firstname">First Name</label>
<input class="form-control" type="text" id="firstname" name="firstname" required placeholder="First Name" autofocus data-ng-model="AddCustomer.firstname">
</div>
</div>
<div controller="ChildController as childCtrl">
<div class="form-group" >
<div class="col-sm-6">
<label for="photo">Aadhaar Front</label>
<input type="file" class="form-control" id="adarfront" name="adarfront" required placeholder="Aadhaar Front" data-ng-model="AddCustomer.adarfront" ng-file-select="onFileSelect($files)">
</div>
<div class="col-sm-6">
<label for="photo">Aadhaar Back</label>
<input type="file" class="form-control" id="adarback" name="adarback" required placeholder="Aadhaar Back" data-ng-model="AddCustomer.adarback" ng-file-select="onFileSelect($files)">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="photo">Other ID Photo Front</label>
<input type="file" class="form-control" id="otheridfront" name="otheridfront" required placeholder="Other ID Photo Front" data-ng-model="AddCustomer.otheridfront" ng-file-select="onFileSelect($files)">
</div>
<div class="col-sm-6">
<label for="photo">Other ID Photo Back</label>
<input type="file" class="form-control" id="otheridback" name="otheridback" required placeholder="Other ID Photo Back" data-ng-model="AddCustomer.otheridback" ng-file-select="onFileSelect($files)">
</div>
</div>
</div>
<button type="submit" class="btn btn-theme" data-ng-disabled="AddCustomerForm.$invalid">Add</button>
</form>
</div>
</div>
</div>
</section>
</section>
</section>
</body>
这是AngularJs代码
var AddCustomer = angular.module("AddCustomerApp", ['angularFileUpload','ui.bootstrap'])
AddCustomer.controller("AddCustomerController", function ($scope, $timeout, $http, jsonFilter)
{
$scope.PersonalDetails = true;
var logResult = function (data, status, headers, config)
{
return data;
};
$scope.AddCustomerData = function (AddCustomer)
{
if($scope.AddCustomer.firstname==undefined || $scope.AddCustomer.adarfront==undefined || $scope.AddCustomer.adarback==undefined || $scope.AddCustomer.otheridfront==undefined || $scope.AddCustomer.otheridback==undefined)
{
alert("All fields are mendatory");
$scope.PersonalDetails = true;
$scope.WarningAlert = data;
}
else
{
$http.post('add-customer-process.php',{'firstname':$scope.AddCustomer.firstname,'adarfront':$scope.AddCustomer.adarfront,'adarback':$scope.AddCustomer.adarback,'otheridfront':$scope.AddCustomer.otheridfront,'otheridback':$scope.AddCustomer.otheridback})
.success(function (data, status, headers, config)
{
if(data=="Success")
{
$scope.PersonalDetails = true;
$scope.SuccessAlert = "Data added successfully";
$scope.AddCustomer = {};
$scope.AddCustomerForm.$setPristine();
$scope.AddCustomerForm.$setUntouched();
}
})
.error(function (data, status, headers, config)
{
$scope.WarningAlert = logResult(data, status, headers, config);
});
}
$scope.switchBool = function (value) {
$scope[value] = !$scope[value];
};
};
});
AddCustomer.controller('ChildController',function ($scope, $http, $upload)
{
$scope.parentCtrl.childCtrl = $scope.childCtrl;
$scope.onFileSelect = function($files)
{
$scope.message = "";
for (var i = 0; i < $files.length; i++)
{
var file = $files[i];
console.log(file);
$scope.upload = $upload.upload({
url: 'upload.php',
method: 'POST',
file: file
}).
success(function(data, status, headers, config)
{
$scope.message = data;
$scope.message=$scope.message.replace('\"', '');
$scope.childCtrl.message=$scope.message.replace('\"', '');
})
.error(function(data, status)
{
$scope.message = data;
});
}
};
});
请帮助我们。我是AngularJS的新手。先谢谢你。