Why can't I send a file using AJAX and formData?

Question

This is my code, I'm trying to send a file to a PHP file but I can't. In JS the answer is that input_f.files[0] is an [object File], however PHP returns Notice: Undefined index: file... , I think that formData doesn't work.

PHP Code

<?php
$file = $_FILES['file']['size'];
echo $file;

JS Code

var text = document.getElementById('text');
var input_f = document.getElementById('input_f');//Input file

var xmlhttp = new XMLHttpRequest();
var formData = new FormData();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        text.innerHTML = this.response;
    }
};
xmlhttp.open("POST","php/convert.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
formData.append('file', input_f.files[0]);
xmlhttp.send(formData);

Possible duplicate of [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — gforce301, Dec 14 '18 at 18:40
can you please try multipart/form-data instead of "application/x-www-form-urlencoded" ? — Kaustubh Kadam, Dec 14 '18 at 18:44
@Kaustubh Kadam multipart/form-data doesn't work, but thanks for the idea becuase I've removed the setRequestHeader and it works. — Andres, Dec 14 '18 at 18:50

score 0 · Answer 1 · answered Dec 14 '18 at 18:54

Try this

<?php
    $file = $_FILES['file']['size'];
    echo $file;
    JS Code

    var text = document.getElementById('text');
    var input_f = document.getElementById('input_f');//Input file

    var xmlhttp = new XMLHttpRequest();
    var formData = new FormData();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            text.innerHTML = this.response;
        }
    };
    xmlhttp.open("POST","php/convert.php");
    formData.append('file', input_f.files[0]);
    xmlhttp.send(formData);

Why can't I send a file using AJAX and formData?

1 Answers1