Ajax FormData file upload not working [JQuery] [PHP]

Question

My upload form isn't working for some reason, when I submit the form the PHP file runs and my $_FILES variable is empty. I've been stuck for hours and I feel like I've been through every post on this site and I just don't understand what's going wrong.

HTML

    <form id="uploadform" name="uploadform" method="POST" enctype="multipart/form-data">
      <input id="realupload" name="realupload" type="file" multiple/>
      <input id="uploadsubmit" type="submit" value="upload"/>
</form>

JQuery

$('#uploadsubmit').click(function(e)
{
    e.preventDefault();

        $.ajax({
            type: "POST",
            url: "upload.php",
            data: function(){
                alert("test");
                var data = new FormData();
                data.append("realupload", jQuery("#realupload").get(0).files[0]);
                return data;
            }
            ,
            processData:false,
            contentType: false,
            cache: false,
            success: function(theData){
                $('#innercontent').html(theData);
            },
            error: function() {
                $('#innercontent').html("ERROR, HELP");
            }
        });

    } 
});

PHP (upload.php)

<?php
//upload.php
if (isset($_FILES["realupload"]))
{
    echo "SUCCESSFUL UPLOAD " . $_FILES["realupload"]["error"];
}
else{
    echo "FILES NOT SET";
}
?>

The PHP file is just a test file to check if the upload worked
FILES NOT SET is output every time
The alert inside of the ajax data function doesn't run, I'm not sure if it's should be
Trying to create a multiple file uploader

Could this be to do with the server? There is already a forum uploaded on there that in itself allows uploads, so I don't think that that is the case, but I'm not sure.

Thanks!

Edit: Guys, thanks for the links, but you can now upload files with HTML5 and the XmlHttpRequest2 object and I'm trying to figure that out.

As many have mentioned you cannot use AJAX to upload files, but there are some tricks to learn. Have a look at this tutorial that shows how to use an iframe to post file uploads - http://www.peachpit.com/articles/article.aspx?p=1766159 — Jay Blanchard, Apr 21 '14 at 19:23
possible duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — Gerald Schneider, Sep 20 '14 at 09:05

score -2 · Answer 1 · edited Sep 20 '14 at 09:04

-2

Just use new jquery library jquery-2.1.1.min.js from http://jquery.com/download/

It will definitely solve your problem. A few days before i was stuck with same problem so I gave try for above library it did work for me.

edited Sep 20 '14 at 09:04

Gerald Schneider

17,416
9
60
78

answered Sep 20 '14 at 07:56

Swapnil Deo

241
1
3
16

score -3 · Answer 2 · answered Apr 21 '14 at 19:10

-3

you cant send files by ajax, you will have to use PHP directly to do that.

answered Apr 21 '14 at 19:10

Mijail Dan Cohen

189
1
1
13

Ajax FormData file upload not working [JQuery] [PHP]

2 Answers2