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"/>

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);

jQuery.ajax({
    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.

• javascript
• php
• jquery
• ajax

• Here; visit php/manual/en/function.error-reporting.php and then apply that to your code. Check your console also. – Funk Forty Niner Commented Aug 3, 2016 at 15:20
• you set a false content type, which means jquery doesn't send any type. if PHP doesn't see an appropriate type e in, it won't ASSUME a form/file submission, and won't parse/populate the input for $_POST/$_FILES. You also set processData to false, so the object you're passing in is NOT processed into a normal submission either. – Marc B Commented Aug 3, 2016 at 15:20
• Check the content type for file upload. You have a mistake there. After that, you can check whether the Ajax call is made properly or not from your browser console. If it gives the error, then you should check that. – Jay Patel Commented Aug 3, 2016 at 15:20
• If your button is within a form you need to stop the form submission, otherwise your page will reload before the AJAX request pletes – Rory McCrossan Commented Aug 3, 2016 at 15:24
• Does your form element have enctype="multipart/form-data" on it? – lesssugar Commented Aug 3, 2016 at 15:57

3 Answers 3

Try this.

Form (index.html)

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

Script (script.js)

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

Server Side (handler.php)

<?php 

var_dump($_FILES);

When posting a file and/or text, This set of codes is also useful for debugging purposes. You can use this to see if your post is too large as that too can cause empty $_POST & $_FILE arrays even though its posted.

    print_r($_POST); /* Looks at the $_POST array. (Will be empty if $_SERVER['CONTENT_LENGTH']/1000000 is greater than ini_get('post_max_size') ) */
    echo "<br>";
    print_r($_FILES); /* Looks at the $_FILES array. It will also show you the file size in bytes: divide it by 1 million (1000000) to get the megabytes value. (Will be empty if $_SERVER['CONTENT_LENGTH']/1000000 is greater than ini_get('post_max_size') ) */
    echo "<br>" . $_SERVER['CONTENT_LENGTH']/1000000 ; /* This will give you the size in megabytes of your $_POST */
    echo "<br>" . ini_get('post_max_size'); /*This will show you the post_max_size in your php.ini file*/
    echo "<br>" . ini_get('upload_max_filesize'); /*This will show you the upload_max_filesize in your php.ini file*/
    // phpinfo(); // You might not need this function but you can use it for more information on your php.ini file. It can help you find its location (for maybe editing purposes) and view its data.

Are you var_dump()-ing your $_FILES/$_POST arrays in the handler.php file?

If you are trying to dump these variables in the file that has the ajax call, it won't work because AJAX is making the front-end call, and the files/post variables are server side variables ... which means only the handler.php file will have these variables available.

Try adding the var_dump() call in handler.php, and output that result in the ajax call, and I am hopeful you will see the results you are looking for.