通过php上传Angular JS文件-未定义索引：

Question

I'm trying to make an upload method with Angular and PHP. that is what i have so far....

HTML

<form class="well" enctype="multipart/form-data">
              <div class="form-group">
                <label for="file">Select a file to upload</label>
                <input type="file" fileread="uploadme" >
                <p class="help-block">Only jpg,jpeg,png and gif file with maximum size of 1 MB is allowed.</p>
              </div>
              <input type="button"  ng-click="upoload()" class="btn btn-lg btn-primary" value="Upload">
            </form>

JS

app.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileread = changeEvent.target.files[0];
                });
            });
        }
    }
}]);

app.controller('upController',function($scope,$http){
$scope.upoload=function(){
        $http.post('server/uploadFile.php',$scope.uploadme).
        success(function(data, status) {
                alert(status +" -- "+ data)
        })
    }})

PHP

<?php
    //turn on php error reporting
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    //$data = json_decode( file_get_contents('php://input') );
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {

        $name     = $_FILES['uploadme']['name'];
        $tmpName  = $_FILES['uploadme']['tmp_name'];
        $error    = $_FILES['uploadme']['error'];
        $size     = $_FILES['uploadme']['size'];
        $ext      = strtolower(pathinfo($name, PATHINFO_EXTENSION));

        switch ($error) {
            case UPLOAD_ERR_OK:
                $valid = true;
                //validate file extensions
                if ( !in_array($ext, array('jpg','jpeg','png','gif')) ) {
                    $valid = false;
                    $response = 'Invalid file extension.';
                }
                //validate file size
                if ( $size/1024/1024 > 2 ) {
                    $valid = false;
                    $response = 'File size is exceeding maximum allowed size.';
                }
                //upload file
                if ($valid) {
                    move_uploaded_file($tmpName,'../uploads/'.$name);
                    $response = 'OOOK!';
                    exit;
                }
                break;
            case UPLOAD_ERR_INI_SIZE:
                $response = 'The uploaded file exceeds the upload_max_filesize directive in php.ini.';
                break;
            case UPLOAD_ERR_FORM_SIZE:
                $response = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form.';
                break;
            case UPLOAD_ERR_PARTIAL:
                $response = 'The uploaded file was only partially uploaded.';
                break;
            case UPLOAD_ERR_NO_FILE:
                $response = 'No file was uploaded.';
                break;
            case UPLOAD_ERR_NO_TMP_DIR:
                $response = 'Missing a temporary folder. Introduced in PHP 4.3.10 and PHP 5.0.3.';
                break;
            case UPLOAD_ERR_CANT_WRITE:
                $response = 'Failed to write file to disk. Introduced in PHP 5.1.0.';
                break;
            case UPLOAD_ERR_EXTENSION:
                $response = 'File upload stopped by extension. Introduced in PHP 5.2.0.';
                break;
            default:
                $response = 'Unknown error';
            break;
        }

        echo $response;
    }
    ?>

The problem is that I can't find a way to give an index to the post variable, I think this is the reason I keep getting an "undefined index" error message. Any suggestions?

Thank you for the help.

Answer 1

There are a few reasons why you are getting an undefined index message.

• One is that form requires a POST method.

Change your form code to:

<form class="well" enctype="multipart/form-data" method="post">

It is required when uploading files.

Forms default to a GET method when omitted.

• The other is this <input type="file" fileread="uploadme" >

It needs a name attribute: name="uploadme"

Change your input to:

<input type="file" fileread="uploadme" name="uploadme">

Plus, since you are using this conditional statement:

if ($_SERVER['REQUEST_METHOD'] == 'POST')

it works in conjunction with the POST method, which as I said, is missing from your form.

---

Read the documentation on move_uploaded_file()

• http://php.net/manual/en/function.move-uploaded-file.php

Quoting from the manual:

This function checks to ensure that the file designated by filename is a valid upload file (meaning that it was uploaded via PHP's HTTP POST upload mechanism). If the file is valid, it will be moved to the filename given by destination .

Answer 2

You should use another library for uploading a file through angular js, take a look here: https://github.com/danialfarid/angular-file-upload

and then you`ll use it something like this in your js controller:

$scope.upload = $upload.upload({
    url: 'your url', //upload.php script, node.js route, or servlet url
    method: 'POST',
    file: scope.fileread
}).progress(function (evt) {
    //console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); 
}).success(function (data) {
    // file is uploaded successfully
});