submit form via jquery FormData

Question

I am trying to upload a file using jquery. Here's the form:

<form id="upload_data" class="project" enctype="multipart/form-data" method="POST">

<select id="project_id" name="project_id">
   <option value="1">1</option> 
   <option value="2">2</option> 
</select>

 <input  type="file" id="data" name="data" />

<input type="hidden" name="user_id" id="user_id" value="12" required>

<button type="submit" id="ajax" class="btn btn-primary">Submit</button>
</form>

Here's the jquery part:

$('#upload_data').submit( function( e ) {

        var form = $('form');
        var formData = new FormData();

                $.each($(':input', form ), function(i, fileds){
                   formData.append($(fileds).attr('name'), $(fileds).val());
               });

                $.each($('input[type=file]',form )[0].files, function (i, file) {
                   formData.append(file.name, file);
               });

$.ajax( {
      url: '../controllers/process.php',
      type: 'POST',
      enctype: 'multipart/form-data',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data)
        {
            alert(data);
        },
        error: function(data)
        {
            alert(data);

        }
    } );

    });

The problem is that I am getting empty post values in process.php:

if (isset($_POST['project_id']) AND isset($_POST['user_id'])){
   //process 
}else{
echo 'No post data';
}

It always return 'No post data' (But in console, I can see that data has been posted but it's not the case in server.). What am I missing here?

Your code seems fine, although there's no `enctype` property, so you can remove that, and you can shorten the `FormData` object population by just doing `var formData = new FormData(form[0]);` and removing the `$.each()` calls. To check your AJAX logic, set a `action` on the `
` element and submit it normally to see if your PHP receives data that way — Rory McCrossan, Jul 25 '17 at 19:36
Probably you are looking at wrong variable, since you are posting a file, you won't find it in $_post.. check $_FILES — Gunnrryy, Jul 25 '17 at 19:47
https://developer.mozilla.org/de/docs/Web/API/FormData/append Try: formData.append('file', file, file.name); — odan, Jul 25 '17 at 19:55
@RoryMcCrossan setting the action works but not the ajax way. — John Ray, Jul 25 '17 at 21:10
This code works for me: https://gist.github.com/odan/fd434f17667c42c482df3507d6fc8917 — odan, Jul 26 '17 at 10:55

score 0 · Answer 1 · answered Jul 25 '17 at 19:51

0

You can use the ajaxForm/ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function.

jQuery AJAX submit form

and

How to send FormData objects with Ajax-requests in jQuery?

answered Jul 25 '17 at 19:51

Farhad Bagherlo

6,725
3
25
47

score 0 · Answer 2 · answered Jul 25 '17 at 20:06

0

If you are appending a file to formData

formData.append(file.name, file);

You need to use this version of the method as per MDN docs

formData.append(name, value, filename);

That will allow you to present a fieldname, file data, and file name

Also you might consider just submiting the form itself without the need for using formData

answered Jul 25 '17 at 20:06

Evans M.

1,791
16
20

I've also tried these. But server script is not getting all post data. – John Ray Jul 25 '17 at 21:11
`You need to use this version of the method as per MDN docs` That's not true. If you read the docs you'll see that the last parameter is optional – Rory McCrossan Jul 25 '17 at 21:57

score 0 · Answer 3 · answered Jul 26 '17 at 14:49

0

Thank you for all your reply. The problem was about max_upload_filesize and post_max_size. I increased the values for these options and now it's working. Thanks.

answered Jul 26 '17 at 14:49

John Ray

1
4

submit form via jquery FormData

3 Answers3