Question

我有一个小应用程序使用角度js和php作为服务器端上传文件。但我没有得到它。它显示php文件中的错误。以下是我的代码。请帮帮我..谢谢。我担心php文件存在一些问题

HTML

<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>File Upload Demo</title>

 <!-- 
    <script type="text/javascript" src="app.module.js"></script>
    <script type="text/javascript" src="controllers.js"></script>
    <script type="text/javascript" src="directives.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="FileUploadController">
    <h2>File Upload Demo</h2>

    <div class="panel panel-default">
        <div class="panel-body">
            <form>
                <div class="form-group">
                    <label for="myFileField">Select a file: </label>
                    <input type="file" name="file" demo-file-model="myFile"  class="form-control" id ="myFileField"/>
                </div>
                <button ng-click="uploadFile()" class = "btn btn-primary">Upload File</button>
            </form>
        </div>
    </div>
    <div>{{serverResponse}}</div>
</body>
</html>

app.js文件

var myApp = angular.module('app', []);


    myApp.directive('demoFileModel', function ($parse) {
        return {
            restrict: 'A', 

            link: function (scope, element, attrs) {
                var model = $parse(attrs.demoFileModel),
                    modelSetter = model.assign; //define a setter for demoFileModel

                //Bind change event on the element
                element.bind('change', function () {
                    //Call apply on scope, it checks for value changes and reflect them on UI
                    scope.$apply(function () {
                        //set the model value
                        modelSetter(scope, element[0].files[0]);
                    });
                });
            }
        };
    });



myApp.controller('FileUploadController', function ($scope, fileUploadService) {

        $scope.uploadFile = function () {
            var file = $scope.myFile;
            var uploadUrl = "upload.php", //Url of webservice/api/server
                promise = fileUploadService.uploadFileToUrl(file, uploadUrl);

            promise.then(function (response) {
                $scope.serverResponse = response;
            }, function () {
                $scope.serverResponse = 'An error has occurred';
            })
        };
    });

myApp.service('fileUploadService', function ($http, $q) {

        this.uploadFileToUrl = function (file, uploadUrl) {
            //FormData, object of key/value pair for form fields and values
            var fileFormData = new FormData();
            fileFormData.append('file', file);

            var deffered = $q.defer();
            $http.post(uploadUrl, fileFormData, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}

            }).success(function (response) {
                deffered.resolve(response);

            }).error(function (response) {
                deffered.reject(response);
            });

            return deffered.promise;
        }
    });

php文件

<?php

error_reporting(E_ALL); 
ini_set('display_errors', 1);

if (isset($_FILES['file'])  )
{


    $temp = explode(".", $_FILES['file']['name']);
    $newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);
    move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);

// give callback to your angular code with the image src name
    // echo json_encode($newfilename);
    echo ("sent");
}
else
{
    echo ("no");    
}

?>

使用角度js上传文件不起作用

0 个答案: