Image upload via ajax POST without using HTML form

Question

I am trying to send some data via POST method to a PHP file without using form in HTML. This is the code I have. Why doesn't it do anything?

<input type="file" name="fileToUpload" id="fileToUpload">
<input type="hidden" value="<?php echo $row['Gallery_Id']; ?>" name="gid" id="gid">
<input type="hidden" value="User" name="user" id="user">
<button onclick="myFormData()">Upload Image</button>
<script>
            $('#fileToUpload').on('change', function() {
            var myFormData = new FormData();
            var file = document.getElementById('fileToUpload').value;
            var gid = document.getElementById('gid').value;
            var user = document.getElementById('user').value;
            myFormData.append('file', file);
            myFormData.append('gid', gid);
            myFormData.append('user', user);
            });

            $.ajax({
                url: 'imgupload.php',
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                dataType : 'json',
                data: myFormData
            });

            </script>

On imgupload.php I get the POST data like this

$gid = $_POST['gid'];
$user = $_POST['user'];

It worked when I used the HTML form method. What's wrong here?

what do you see in the console ? any errors .visit network tab — Madhawa Priyashantha, Mar 31 '16 at 06:22
you need enctype="multipart/form-data" this in form to upload files — Santosh Ram Kunjir, Mar 31 '16 at 06:27
@SantoshRamKunjir, to do this I have to use the
HTML tag right? — Yohan Blake, Mar 31 '16 at 23:10
@SantoshRamKunjir, that's not what I want. If you see the question, I want to upload without using the html form. That's the whole point of this question — Yohan Blake, Apr 01 '16 at 03:44
You're not actually pulling the values out of your input elements, you're just getting the html elements themselves. — HeadCode, Apr 01 '16 at 06:14
@HeadCode, ah yes, I had that on my code, forgot to update here. But nah, not working yet :( — Yohan Blake, Apr 02 '16 at 06:40

jeroen · Answer 1 · 2016-03-31T06:35:16.333

1

FormData.append() takes key-value pairs, so this is wrong:

myFormData.append(file,gid,user);

You need something like:

myFormData.append('file', file);
myFormData.append('gid', gid);
myFormData.append('user', user);

Appart from that you need to put this code inside an event handler so that it triggers when you need it to.

For example:

$('#fileToUpload').on('change', function() {
  // your javascript code
});

And you should probably also put it inside a document.ready block.

edited Mar 31 '16 at 06:35

answered Mar 31 '16 at 06:30

jeroen

91,079
21
114
132

I made the changes you said, but still nothing. I updated the code on the question – Yohan Blake Mar 31 '16 at 23:18
@YohanBlake If you missed it, see my comment below your question. – HeadCode Apr 01 '16 at 19:36
@HeadCode There is definitely plenty wrong here :-) – jeroen Apr 01 '16 at 19:39

Image upload via ajax POST without using HTML form

1 Answers1