Post Data and Multiple Image using Ajax

Question

I have a form that has a multiple input data and 4 input image,how do i post them using Ajax ? here is my set of code i have tried...
HTML

<form action="<?php echo base_url('link')?>/to/controller" method="POST" id="frm-update" enctype="multipart/form-data">

<!-- Normal Post -->

  <input type="text" name="input1" id="input1" class="form-control">Normal Input1
  <input type="text" name="input2" id="input2" class="form-control">Normal Input2
  <input type="text" name="input3" id="input3" class="form-control">Normal Input3
  <input type="text" name="input4" id="input4" class="form-control">Normal Input4

<!-- Image Post -->

  <input type="file" name="image1" id="image1" class="form-control">Image 1
  <input type="file" name="image2" id="image2" class="form-control">Image 2
  <input type="file" name="image3" id="image3" class="form-control">Image 3
  <input type="file" name="image4" id="image4" class="form-control">Image 4

  <button type="submit" class="btn btn-success">Save

Jquery

<script>
$("#frm-update").validate({
  ignore: ':hidden:not(.chzn)',
    errorPlacement: function (error, element) {
        if (element.is(":hidden")) {
            element.next().parent().append(error);
        } else {
            error.insertAfter(element);
        }
    },

 submitHandler: function(form) {
     $.ajax({
      type: 'POST',
      url: $("#frm-update").attr('action'),
      data: $("#frm-update").serialize(),

</script>

what i've been thinking is,what if i used new FormData(this),do all input on my form is saved ? or is it just the image ?

this post might help you [jQuery Ajax Upload](http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php) (keep in mind that for Ajax upload `contentType: false, processData: false,` are mandatory) — OldPadawan, Apr 28 '17 at 19:59
i already tried that,but it didnt work because i set
into controller...@OldPadawan — Bakti Wijaya, Apr 28 '17 at 20:20

Junius L · Accepted Answer · 2017-04-28T21:12:00.267

0

Use FormData instead of serialize()

$("#frm-update").validate({
    ignore: ':hidden:not(.chzn)',
    errorPlacement: function (error, element) {
        if (element.is(":hidden")) {
            element.next().parent().append(error);
        } else {
            error.insertAfter(element);
        }
    },

    submitHandler: function (form) {
        var data = new FormData(form);
        $.ajax({
            url: $(form).attr('action'),
            data: data,
            type: 'POST',
            contentType: false,
            processData: false,
            success: function (data) {
               // data passed from php
                console.log(data);
            }
        });
    }
});

Then in your PHP you can do something like the following

<?php

// get values of input through $_POST
// move uploaded files to a directory with move_uploaded_file() function

// get inputs using $_POST
$input1 = $_POST['input1'];
$input2 = $_POST['input2'];
$input3 = $_POST['input3'];
$input4 = $_POST['input4'];

// get files using $_FILES
$image1 = $_FILES['image1']['name'];
$image2 = $_FILES['image2']['name'];
$image3 = $_FILES['image3']['name'];
$image4 = $_FILES['image4']['name'];

// save values to the database
?>

edited Apr 28 '17 at 21:12

answered Apr 28 '17 at 21:02

Junius L

15,881
6
52
96

the code works well,the Jquery works,but the image wont post,and i tried to inspect element,the content type was set to text/html; charset=UTF-8,it should be multipart/form-data,isnt it ? – Bakti Wijaya Apr 28 '17 at 21:22
which image is not getting posted? – Junius L Apr 28 '17 at 21:33
all of them...on database,the image1 - image4 field are set..but the file wont upload to /uploads...so i tried to set the content type manually..and it worked... – Bakti Wijaya Apr 28 '17 at 21:37
so the images are sent to `PHP` but you can't move them? – Junius L Apr 28 '17 at 21:39
that will do,using your code...but only change the content type manually into multipart/formdata,thank you..... – Bakti Wijaya Apr 28 '17 at 21:39

Post Data and Multiple Image using Ajax

1 Answers1