mbricep mbricep - 1 year ago 123
Javascript Question

$_POST and $_FILES empty after AJAX file upload

I am new to web development, and the latest problem I have been having is ajax file uploading...

Right now I have two HTML input fields; a file input and a button.

<input type="file" name="Frame" id="Frame_"/>
<input type="button" name="FrameButton" id="FrameButton_" value="UPLOAD"/>

After the button is clicked I then call a function that has the following code..

var frame = document.getElementById('Frame_');
var frameImg = frame.files[0];
var form_data = new FormData();

form_data.append('frame', frameImg);

url : './handler.php',
type : 'post',
data : form_data
contentType : false,
processData : false,
success : alert("Frame Uploaded")

When I var_dump() the $_POST and $_FILES array it shows both arrays as empty. This is despite the "Request Payload" in Chrome Dev reading

Content-Disposition: form-data; name="frame"; filename="GoldFrame.jpg"

Content-Type: image/jpeg

In which I am under the impression that this means the information of the file that I select on the front end is being successfully "post"ed to my handler.php file. Is this a wrong interpretation?

Either way, could someone please give me an answer to my problem? Or atleast point to a resource that might have my answer? There seem to be many similar questions along the same lines, but I haven't seen one that has a solid answer.

I have used iframes for this kind of thing in the past, but that seems like a really hacky method, and I would like to have the flexibility to use ajax for this kind of task in the future.

Help is appreciated.

Answer Source

Try this.

Form (index.html)

<form id="uploadForm">
    <input type="file" name="frame" />
    <input type="submit" value="UPLOAD" />

Script (script.js)

$("#uploadForm").on('submit',(function(e) {
        url: "handler.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data){

Server Side (handler.php)