无法将上传的文件名传递给angularjs

时间:2017-06-29 06:25:14

标签: javascript php angularjs

我们正在处理用户可以上传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的新手。先谢谢你。

0 个答案:

没有答案