Ajax文件上传 - 服务器端出错

问题描述:

I am trying to implement ajax file upload via the HTML5 File API. It's based on Afzaal Ahmad Zeeshan's answer to this question.

I've basically copied the entire code that he wrote, but can't get it to work.

The main aim here is to be able to upload .xls and .xlsx files to the server to work with them later with PHPExcel.

Here's my HTML:

<form class="form-uploadXLS" method="post" action="php/uploadXLS.php" enctype="multipart/form-data">
    <div class="form-group">
        <div class="col-md-12">
            <input type="file" name="xls" class="xls" />
        </div>
    </div>
    <input type="button" value="Upload" class="btn-uploadXLS" />
</form>
<progress></progress>

And here are the jQuery event handlers, just like in the above mentioned answer:

File input onChange event:

$('.xls').on('change', function () {
    var file = this.files[0];
    var fileName = file.name;
    var fileType = file.type;
    var fileSize = file.size;

    console.log("file name: " + fileName + ", type: " + fileType + ", size: " + fileSize);
});

Upload button's onClick event:

$('.btn-uploadXLS').on('click', function (event) {
    event.preventDefault();
    console.log("Upload button clicked");
    var formData = new FormData($('.form-uploadXLS')[0]);

    $.ajax({
        url: 'php/uploadXLS.php', //Server script to process data
        type: 'POST',
        xhr: function () { // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: function (stuff) {
            console.log("BeforeSend");
            console.log(stuff);
        },
        success: function (data) {
            console.log("Success!");
            console.log(data);
        },
        error: function (error) {
            console.log("Error!");
            console.log(error);
        },
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
});

Edit starts here:

And finally here's my PHP code that prints out the $_FILES array:

if(!empty($_FILES['xls'])) {
    echo '<pre>',print_r($_FILES,1),'</pre>';
}
else {
    die('POST ÜRES');
}

And here's the result:

Array
(
    [xls] => Array
        (
            [name] => 
            [type] => 
            [tmp_name] => 
            [error] => 4
            [size] => 0
        )

)

For some reason I can't access the error messages, it only contains the number 4.

What am I doing wrong?

For files you need

$_FILES['xls'] not $_POST

Read Handling file uploads


To get more info just print array
echo '<pre>',print_r($_FILES,1),'</pre>'

Read php - file upload

Ajax File Upload with PHP, HTML5 File API and jQuery