I am new to XMLHttpRequest and I have been using it as a AJAX file uploader using JavaScript's FormData().

The problem I am having is that it seems to upload fine, although I think it is not sending it to the right PHP file or my PHP is wrong because nothing is displayed in the folder where pictures should be.

At the moment, I don't know how to view the returned html data

JavaScript:

$("#form").submit(function(event) {

    event.preventDefault();
    event.stopPropagation();

    var form = $(this);
    var file = document.getElementById("file");
    var data = new FormData();

    var onerror = function(event) {
        alert("An error occoured!");
    }
    var onprogressupdate = function(event) {

        if(event.lengthComputable) {

            var percent = event.loaded / event.total * 100;

            $("#progress").html(percent+"%");

        }

    }
    var onreadystatechange = function(event) {

        if(request.status == 200 && request.readyState == 4) {

            alert("Uploaded!");

            $("#progress").hide();
            $("#progress").html("");

        }
        else {
            alert("Alternative state and/or status");
            console.log("state: " + request.state); 
            console.log("readyState: " + request.readyState);
        }

    }

    for(var i = 0; i < file.files.length; i++)
        data.append('file[]', file.files[i]);

    $("#progress").show();
    $("#progress").html("Uploading files...");

    var request = new XMLHttpRequest();

    request.upload.addEventListener("error", onerror);
    request.upload.addEventListener("progress", onprogressupdate);
    request.upload.addEventListener("readystatechange", onreadystatechange);

    request.open("post", "upload.php");
    request.setRequestHeader("Content-type", "multipart/form-data");
    request.send(data);

});

Upload page

<?php

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

        $f = $_FILES["file"];
        $dir = "data";

        if(!file_exists($dir))
            mkdir($dir);

        foreach($f["name"] as $k => $name) {

            $file = $dir."/".$name;

            if($f["error"][$k] == 0 && move_uploaded_file($f["tmp_name"][$k], $file)) {
                $uploaded[] = $file;
            }

        }

        die(json_encode($uploaded));        
    }

?>

I am new to XMLHttpRequest and I have been using it as a AJAX file uploader using JavaScript's FormData().

The problem I am having is that it seems to upload fine, although I think it is not sending it to the right PHP file or my PHP is wrong because nothing is displayed in the folder where pictures should be.

At the moment, I don't know how to view the returned html data

JavaScript:

$("#form").submit(function(event) {

    event.preventDefault();
    event.stopPropagation();

    var form = $(this);
    var file = document.getElementById("file");
    var data = new FormData();

    var onerror = function(event) {
        alert("An error occoured!");
    }
    var onprogressupdate = function(event) {

        if(event.lengthComputable) {

            var percent = event.loaded / event.total * 100;

            $("#progress").html(percent+"%");

        }

    }
    var onreadystatechange = function(event) {

        if(request.status == 200 && request.readyState == 4) {

            alert("Uploaded!");

            $("#progress").hide();
            $("#progress").html("");

        }
        else {
            alert("Alternative state and/or status");
            console.log("state: " + request.state); 
            console.log("readyState: " + request.readyState);
        }

    }

    for(var i = 0; i < file.files.length; i++)
        data.append('file[]', file.files[i]);

    $("#progress").show();
    $("#progress").html("Uploading files...");

    var request = new XMLHttpRequest();

    request.upload.addEventListener("error", onerror);
    request.upload.addEventListener("progress", onprogressupdate);
    request.upload.addEventListener("readystatechange", onreadystatechange);

    request.open("post", "upload.php");
    request.setRequestHeader("Content-type", "multipart/form-data");
    request.send(data);

});

Upload page

<?php

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

        $f = $_FILES["file"];
        $dir = "data";

        if(!file_exists($dir))
            mkdir($dir);

        foreach($f["name"] as $k => $name) {

            $file = $dir."/".$name;

            if($f["error"][$k] == 0 && move_uploaded_file($f["tmp_name"][$k], $file)) {
                $uploaded[] = $file;
            }

        }

        die(json_encode($uploaded));        
    }

?>

• php
• javascript
• xmlhttprequest

• Can you provide the server response (with firebug) ? – Antoine Commented Jun 16, 2013 at 21:33

2 Answers 2

Don't set the content type, its set automatically.

Create your FormData object with form element you want to send:

var data = new FormData(this);

instead of

var data = new FormData();

The syntax of the FormData is

new FormData (optional HTMLFormElement form)

without the argument, it is empty, see the reference.