Ajax PHP file upload mistake

Question

I have this code in client side:

fileUpload: function monkey(){
        var file = t.gI("photoFile"); //get element by photoFile
        var formData = new FormData();
        console.log(file.files.length);
        formData.append("upload", file.files[0]);
        var req = t.gR(); //XMLHTTPRequest
        req.open('POST', 'php/fileupload.php', true);
        req.setRequestHeader("Content-Type", "multipart/form-data", true);
        req.send(formData);
        req.onreadystatechange = function () {
            if (req.readyState === 4) {
                if (req.status == 200 && req.status < 300) {
                    t.gI("eventBox").innerHTML = req.responseText; //eventbox error handler
                    adminHandler.eventBox();
                }
            }
        }
    },

And this in server side:

<?php
    header('Content-Type:multipart/form-data');

    echo $_FILES['upload']['tmp_name'];
?>

And I got this error msg:

[15-Jun-2015 12:03:21 UTC] PHP Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 [15-Jun-2015 12:03:21 UTC] PHP Notice: Undefined index: upload in /home/webprogb/public_html/php/fileupload.php on line 4

What can I do to fix it?

Answer 1

You can use this code for file uploading with ajax in pure javascript. Change this "#fileUploader" according to file field ID.

var AjaxFileUploader = function () {
    this._file = null;
    var self = this;

    this.uploadFile = function (uploadUrl, file) {
        var xhr = new XMLHttpRequest();
        xhr.onprogress = function (e) {
           //error
        };

        xhr.onload = function (e) {
            //error
        };

        xhr.onerror = function (e) {
            //error
        };

        xhr.open("post", uploadUrl, true);

        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("X-File-Type", file.type);

        xhr.send(file);
    };
};

AjaxFileUploader.IsAsyncFileUploadSupported = function () {
    return typeof (new XMLHttpRequest().upload) !== 'undefined';
}

 if (AjaxFileUploader.IsAsyncFileUploadSupported) {
        ajaxFileUploader = new AjaxFileUploader();

        $("form").submit(function () {
            var uploader = $("#fileUploader")[0];

            if (uploader.files.length == 0) {
                return;
            } else {
                ajaxFileUploader.uploadFile(
                    "/YourUploadUrl",
                    uploader.files[0]);
            }

            return false;
        });
    }