CODEWITHSUNDEEP
phpjqueryhtml
GiantDuck
GiantDuck

Reputation: 1064

Submit form including file upload via jQuery ajax

HTML:

<input type="text" name="description">
<input type="file" name="image" accept=".jpg">

How can I use $.ajax to upload the image and text value? I have no problem producing an object to submit text data, but have no idea where to start with the image.

I am using PHP server-side, so encoding the image in base64 or similar methods are perfectly acceptable.

Upvotes: 5

Views: 6411

Answers (2)

Naresh
Naresh

Reputation: 18

Use jQuery form js to upload images using ajax.

Check https://github.com/malsup/form/

var options = {
   url     : 'url',
   success : function(responseText) { "event after success "}
};

$(" form id ").ajaxSubmit(options);

and get image in php file and upload images

Upvotes: 0

Girish
Girish

Reputation: 12127

it’s easiest to use the FormData() class:

So now you have a FormData object, ready to be sent along with the XMLHttpRequest. and append fields with FormData Object

<script type="text/javascript">
           $(document).ready(function () {
               var form = $('form'); //valid form selector
               form.on('submit', function (c) {
                   c.preventDefault();

                   var data = new FormData();
                   $.each($(':input', form ), function(i, fileds){
                       data.append($(fileds).attr('name'), $(fileds).val());
                   });
                   $.each($('input[type=file]',form )[0].files, function (i, file) {
                       data.append(file.name, file);
                   });
                   $.ajax({
                       url: '/post_url_here',
                       data: data,
                       cache: false,
                       contentType: false,
                       processData: false,
                       type: 'POST',
                       success: function (c) {
                            //code here if you want to show any success message
                       }
                   });
                   return false;
               });
           })
</script>

and forcing jQuery not to add a Content-Type header for you, otherwise, the upload file boundary string will be missing from it.

Upvotes: 2

Related Questions