How to see the Files uploaded in a form with ajax?

Question

I'm trying to upload a file send in a form. I'm trying it with php, but between html and php I use JS and Jquery and ajax (because I don't want the page to reload). And I'm having troubles with the $_FILES.

Here it is, I'm using a form (which contains a file input) with a javascript action (action="javascript: SendPresupMail();").

In that JS function I use a little Jquery and ajax, inside it, there is a call to a php function.

The problem is that inside that php function the $_FILES is empty, and I need to upload the file send in the form.

Here is the code:

HTML form, calling to JS:

<form action="javascript: sendPresupMail();" method="post" id="formId" enctype="multipart/form-data">
<input type="text" id="mail" name="mail" />
<input type="file" id="file_selected" name="file_selected" />
<input type="submit" value="Submit" />

JS function, and call to PHP with AJAX and JQUERY:

function sendPresupMail() {
$.ajax({
    url: 'remote.php',
    type: 'post',
    data: {
    'w': 'sendPresupMail',
    'mail': document.getElementById('mail').value
    },
    success: function(data) {
        if(data != "ok" && data != ""){alert(data);}
        if(data == "ok"){alert("mail send.");}
    }
});

}

Finally, the PHP code:

private function sendPresupMail(){
    $filename = ($_FILES['file_selected']['name']);
            ...
            ...
}

The code there is irrelevant, the issue is that $filename is not receiving anything because $_FILES it's empty (I checked it with a var_dump, and it's empty). So I can not upload the file, what should I do?

SOLVED

Here is the solution: Actually it was a lot simplier than I thought. First, I create an iframe, so now all the form, javascript, ajax, etc. is hapenning inside the iframe. So it seems like the page is not refreshing, because the iframe is doing it. Thanks all for your answers anyway!

score 2 · Accepted Answer · answered Sep 09 '13 at 21:05

2

You can't do it with pure Ajax/jQuery, but you can do it in combination with the JavaScript FormData object which is supported in all latest versions of the major browsers.

A really simple jQuery example can be found here: https://coderwall.com/p/p-n7eq

A more detailed, yet pure JavaScript, can be found here: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects?redirectlocale=en-US&redirectslug=Web%2FAPI%2FFormData%2FUsing_FormData_Objects

answered Sep 09 '13 at 21:05

Stigmha

116
3

Thanks, I tried this and it worked. but then I tried doing it with iframe and it was much easier. However, thank you for answering, I also learnt a lot of JQuery. – AleOtero93 Oct 07 '13 at 18:34

score 1 · Answer 2 · edited May 23 '17 at 12:29

The $_POST variable on the page you are posting to is populated from the data you are submitting in the $.ajax call. That data has no file inputs, and I'm not sure it can. Take a look around for some handy plugins.

This recommends using the jQuery Form Plugin: jQuery AJAX post with fileupload

I've personally used Uploadify previously: http://www.uploadify.com/

Or manually do it: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

score 0 · Answer 3 · answered Sep 09 '13 at 20:58

0

Check if $_POST is also empty. $_POST and $_FILES tend to be empty when the file uploaded exceeds upload_max_filesize or post_max_size

answered Sep 09 '13 at 20:58

Crashspeeder

4,291
2
16
21

it is empty too, but the size of the file is low, is just an image. – AleOtero93 Sep 09 '13 at 21:06

How to see the Files uploaded in a form with ajax?

3 Answers3

Linked