Upload file with AJAX & PHP - $_FILES array is empty

Question

I have read close to 20 different forum post/stackoverflow questions/answers about this but I just can't get this work. I've worked with jQuery/PHP about 5years now but this is first time when I need to do something like this with AJAX.

So... for now, I'm just testing and trying upload .txt file and try get the contents of it by using file_get_contents() and send it back to my JS code.

I have removed all fancy staff and simplified my files as much as I could, so this is my HTML file:

<div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <form id="uploadForm" action="url/to/php/script"> <input type="file" name="frame" /> <input type="submit" value="UPLOAD" /> </form> </div> </div> </div>

and my JS

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

and in my PHP script I have var_dump($_FILES) which gives me empty array.

My JS & form are copied from one of the stackoverflow's answers. URL: $_POST and $_FILES empty after AJAX file upload - because it's marked as it works but for me... still empty.

Normally my form have enctype="multipart/form-data" and method="post" but theres no difference.

My jQuery lib: http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

I came here because I feel like there's no more things I could try, no matter what I do, $_FILES array is empty.

You're using a very, very old version of jQuery. try upgrading it to at least 1.12. Ideally 3.2, if you don't need legacy IE support — Rory McCrossan
– Rory McCrossan, Commented Apr 4, 2017 at 6:59
@Rory McCrossan oh.... my.... god.... I have copied my jquery lib from my previous project but I guess this time I copied it from pretty old project. haha I changed my lib to 1.12 and it works now. Thank you!:) — Cecily Miller
– Cecily Miller, Commented Apr 4, 2017 at 7:05
@mtizziani jQuery adds that for you when you give data a FormData object. — Rory McCrossan
– Rory McCrossan, Commented Apr 4, 2017 at 7:08

Rory McCrossan · Accepted Answer · 2017-04-04 07:06:43Z

Your AJAX logic is fine. The issue is because you're using a very, very outdated version of jQuery, and there have been many tweaks to the AJAX logic over the years of development - especially since the rise in support for FormData and sending binary data via AJAX.

You should upgrade jQuery to at least 1.12, ideally 3.2 if you don't need legacy IE support.

Shafiqul Islam · Accepted Answer · 2017-04-04 07:14:33Z

use new version jquery library like this, your ajax code looks good so for this requirement need to update your jquery library . you use old library in that case it is not working http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

more for information

https://code.jquery.com/jquery/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $("#uploadForm").on('submit',(function(e) { e.preventDefault(); $.ajax({ url: "url/to/php/script", type: "POST", data: new FormData(this), contentType: false, cache: false, processData: false, success: function(data){ console.log(data); } }); })); </script>

Collectives™ on Stack Overflow

Upload file with AJAX & PHP - $_FILES array is empty

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related