PHP AJAX Image Uploading with FormData

Question

I am relatively new to jQuery and Ajax functions, but have been working with Ajax forms over the past few days. I have come to a problem with file uploads however when trying to upload images. Whilst looking for resources, I couldn't find anything useful because they seem to be over-complicated with pointless extras or have no explanation whatsoever, which doesn't help me to learn any further.

I have wrote this code to handle the image upload in Ajax:

$(function() {
    $('.input_photo').on("change",function() {                              
        var formData = new FormData($('form.upload-form'));

        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formData,
            success: function (msg) {
                alert(msg)
            }
        });
    });
});

This sends a request to the upload.php file, however no data is sent, basically my form is literally this:

<form class="upload-form">
     <input type="file" name="input_photo" class="input_photo" />
</form>

No data seems to be passed in the headers whatsoever and I assume I would access it through PHP with $_POST['data'] array or $_FILES? Someone with better knowledge please help to explain this, it'd be great to understand this further. Thanks.

Community · Accepted Answer · 2017-05-23 12:10:12Z

9

This will work for one or multiple files.

$('input:file').on('change', function () {  

 var data = new FormData();

 //Append files infos
 jQuery.each($(this)[0].files, function(i, file) {
     data.append('file-'+i, file);
 });

 $.ajax({  
     url: "my_path",  
     type: "POST",  
     data: data,  
     cache: false,
     processData: false,  
     contentType: false, 
     context: this,
     success: function (msg) {
          alert(msg);
      }
  });
});

Then

$_FILES['file-0']
$_FILES['file-1']
[...]

But be careful that using FormData doesn't work on IE before IE10

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Feb 21, 2015 at 10:54

Thomas C.

3,7065 gold badges38 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny Over a year ago

Worked perfectly first time, although I changed it to .on('change') since live is deprecated. Thank you very much.

kidA · Accepted Answer · 2015-02-21 10:52:30Z

2

You need to set processData and contentType in your ajax call ( also added id to your input element in order to fetch the file contents).

HTML

    <form class="upload-form">
         <input type="file" id="photo" name="input_photo" class="input_photo" /> 
    </form>

JS

  $(function() {
        $('.input_photo').on("change",function() {    
            var file = document.getElementById("photo").files[0]; //fetch file
            var formData = new FormData();                     
            formData.append('file', file); //append file to formData object

            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formData,
                processData: false, //prevent jQuery from converting your FormData into a string
                contentType: false, //jQuery does not add a Content-Type header for you
                success: function (msg) {
                    alert(msg)
                }
            });
        });
    });

edited Feb 21, 2015 at 10:52

answered Feb 21, 2015 at 10:47

kidA

1,3871 gold badge9 silver badges20 bronze badges

1 Comment

Danny Over a year ago

Just tried pretty much this exact code from another question and it just passes an empty $_FILES array for some reason.

Makyen · Accepted Answer · 2015-02-21 15:41:22Z

-2

Try with this:

var formData = $('form.upload-form').serialize();

edited Feb 21, 2015 at 15:41

Makyen♦

33.6k12 gold badges94 silver badges128 bronze badges

answered Feb 21, 2015 at 10:43

Nilesh Nartam

2962 silver badges11 bronze badges

1 Comment

Danny Over a year ago

That only posts form data, not file data.

Collectives™ on Stack Overflow

PHP AJAX Image Uploading with FormData

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related