JQuery's .load function won't pass variable to my PHP file

Question

I'm aware that this is possible using JQuery's ajax functions but I'm specifically wanting to try do this using JQuery's .load() function.

Here's my code:

HTML:

<form class="form" action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="csv-file">
    <p class="upload-button">Upload</p>
    <p class="upload-output"></p>
</form>

Javascript:

$('.upload-button').click(function() {
    var formData = $('.form').serializeArray();
    $('.upload-output').load('upload.php', formData);
});

When I click on the upload-button the form is serialized and sent to my PHP file called upload.php. This is the contents of upload.php - I'm currently just checking to see if it recieves the file at all:

if(isset($_FILES['csv-file'])){
    echo 'found file';
} else echo 'no file';

All of this looks fine but for some reason it returns no file every time and I'm not sure why.

I've tried different input types like a text field, textarea and they all work but whenever I try to pass an input with type file it doesn't work. Why is this? and how can I get the file through to my PHP file using .load()? Is it even possible?

yes it is and I know my html is finding it because it does everything else in the 'upload.php' file apart from upload the file I have tried to pass through — A Friend, Oct 05 '17 at 17:09
Well you need to wrap a function around `$('.form').serializeArray()`, right now it looks like you are trying to pass it as a parameter. After `upload.php,` add `function(){}` and move `$('.form').serializeArray()` inside that function. — Aaron Eveleth, Oct 05 '17 at 17:13
Well first, your PHP file isn't passing any data back. You need to `echo json_encode();` You also need to add the `response` parameter(1st of 3) to the callback function I had you add. — Aaron Eveleth, Oct 05 '17 at 17:27
Actually you may not need `response`. I'm not very experienced with the `.load` function. Just reviewing the documentation. By the way, you said "without using ajax". I just want to clarify this is still ajax, it's just a shorthand method. You may have an easier time with the normal `$.ajax` function which allows you to still run your code, but also neatly pass any data to the DOM in a success function. — Aaron Eveleth, Oct 05 '17 at 17:31
@AaronEveleth thanks for your help here. Could you write an official answer with how you think the php and javascript should look? That may help here :) — A Friend, Oct 05 '17 at 17:34
Before I create the answer, I need to know what data you intend to pass. Can you add that to your php file in your post? — Aaron Eveleth, Oct 05 '17 at 17:54

score 0 · Accepted Answer · answered Oct 09 '17 at 20:37

Actually, you can't upload files with Ajax that way because .serialize() only gives you the file names.

Use FormData:

$('.upload-button').click(function() {
var formData = new FormData($('form')[0]);
$('.upload-output').load('upload.php', formData); });

Also see: Sending multipart/formdata with jQuery.ajax

And: How can I upload files asynchronously?

JQuery's .load function won't pass variable to my PHP file

1 Answers1