Question

0

86

Vistas

Post Data and Multiple Image using Ajax

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 ?

9 months ago · Santiago Trujillo

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-05-26T17:01:45.405Z

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
?>