5

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.

GiantDuck
  • 1,086
  • 3
  • 14
  • 27
  • What exactly is your level of knowledge in jQuery and Ajax? Unless you are really a rookie in these, this is easily done just having a jQuery event bound to the form's submission and invoking an Ajax post there... – lucasnadalutti May 28 '15 at 16:57
  • @lucasnadalutti How can I submit the image though? – GiantDuck May 28 '15 at 17:02
  • The image will be sent along with your form's data if you send this data via Ajax. There are also some JS upload libraries out there. If you think it's better to use them, I recommend this one: http://www.plupload.com/ – lucasnadalutti May 28 '15 at 17:08
  • @lucasnadalutti I really don't want to add another library for something that should be so simple. – GiantDuck May 28 '15 at 17:39
  • Check this - http://stackoverflow.com/questions/27740085/image-not-getting-posted-with-ajaxwithout-submitting-the-form – Sougata Bose May 29 '15 at 04:29

2 Answers2

2

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.

Girish
  • 11,907
  • 3
  • 34
  • 51
0

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Naresh
  • 18
  • 6