Ankit Shubham Ankit Shubham - 5 months ago 27
HTML Question

$_FILES global variable not able to receive data sent from XMLHttpRequest()

I am trying to upload a file to a folder in my server using XMLHttpRequest() and PHP.
Here is the HTML file

fu2.html
:

<form action="fu2.php" method="POST" enctype="multipart/form-data">
<input type="file" name="file" id="file"><br><br>
<input type="button" value="Upload" onclick="loadFile()">
</form>
<script>
function loadFile() {

var myFileList = document.getElementById("file").files;
var fileToUpload = myFileList[0];
alert(fileToUpload.name+","+fileToUpload.tmp_name);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://10.192.44.143/pgadmsn/fu2.php',false);
xhr.send(fileToUpload);
alert(xhr.responseText);
}
</script>


The php file
fu2.php
is :

<?php
if(isset($_FILES["fileToUpload"])){
$name = $_FILES["fileToUpload"]["name"];
$tmp_name = $_FILES['fileToUpload']['tmp_name'];

if (isset ($name)) {
if (!empty($name)) {

$location = 'uploads/';

if (move_uploaded_file($tmp_name, $location.$name)){
echo 'Uploaded';
}

} else {
echo 'please choose a file';
}
}
else{
echo "name not set";
}
}
else echo "FILES not set!";
?>


There are 2 problems that I am facing:


  1. In
    alert(fileToUpload.name+","+fileToUpload.tmp_name);
    , fileToUpload.tmp_name is coming to be undefined.

  2. The major problem is that in fu2.php file where
    isset($_FILES["fileToUpload"])
    is evaluating to
    false
    because I am getting
    FILES not set!
    as
    xhr.responseText
    .



What am I doing wrong here?

Answer

Here is the flaws :

1). You're referencing an unexisting component name. It's $_FILES["file"] not $_FILES["fileToUpload"]

2). Basically you're transmitting binary data to server via Ajax, you need mechanism to wrap the file into readable stream it can be achieved using FormData object.

Here I fixed your codes:

fu.html

<form action="fu2.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="file"><br><br>
    <input type="button" value="Upload" onclick="loadFile()">
</form>
<script>
    function loadFile() {

        var myFileList = document.getElementById("file").files;
        var fileToUpload = myFileList[0];

        var fd = new FormData();
        fd.append("file", fileToUpload);
        alert(fileToUpload.name);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", 'http://10.192.44.143/pgadmsn/fu2.php',false);
        xhr.send(fd);
        alert(xhr.responseText);
    }
</script>

fu.php

<?php
if(isset($_FILES["file"])){
    $name = $_FILES["file"]["name"];
    $tmp_name = $_FILES['file']['tmp_name'];

    if (isset ($name)) {
        if (!empty($name)) {

            $location = 'uploads/';

            if  (move_uploaded_file($tmp_name, $location.$name)){
                echo 'Uploaded';
            }

        } else {
            echo 'please choose a file';
        }
    }
    else{
        echo "name not set";
    }
}
else echo "FILES not set!";
?>
Comments