Insert and move multiple images via jQuery AJAX in CodeIgniter [duplicate]

Answer 1

Maybe your ajax request is not success at all. I mean there are some errors in the middle process of uploading the image. Try add error option on your ajax declaration.

$.ajax({
    type:"POST",
    data:formData,
    url:"<?php echo base_url(); ?>admin/products",
    success: function(response) { // <-- will called if http response is 200
        //console.log(response);
        alert(response);
    },
    error: function(response) {  // <-- will called if any error in server. http response: 400, 500, etc
        //console.error(response);
        alert(response);
    }

});

Don't forget to enable your php error reporting and also checking the php error log will give you more information

Answer 2

Ok here a complete answer from A to Z of how to upload multiple files using ajax, first of all in the view, you can put as many file inputs as you want but as an array of course like this:

<form enctype="multipart/form-data" action="<?php echo base_url('') ?>" method="post">
    <input name="files[]" type="file" />
    <input name="files[]" type="file" />
    <input type="button" value="Upload" id="upload"/>
</form>

Then your ajax like this, no overhead whatsoever, just a normal submission:

$('#upload').click(function(e) {
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);
    $.ajax({
        url: "<?php echo base_url() ?>",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {

        },
        error: function(response) {

        }
    });
});

But this code will pass $_FILES like this:

array(1) {
    ["files"]=>
    array(5) {
        ["name"]=>
        array(2) {
            [0]=>
            string(10) "imgOne.jpg"
            [1]=>
            string(31) "imgTwo.png"
        }
        ["type"]=>
        array(2) {
            [0]=>
            string(10) "image/jpeg"
            [1]=>
            string(9) "image/png"
        }
        ["tmp_name"]=>
        array(2) {
            [0]=>
            string(24) "C:\xampp\tmp\phpF867.tmp"
            [1]=>
            string(24) "C:\xampp\tmp\phpF878.tmp"
        }
        ["error"]=>
        array(2) {
            [0]=>
            int(0)
            [1]=>
            int(0)
        }
        ["size"]=>
        array(2) {
            [0]=>
            int(358419)
            [1]=>
            int(72657)
        }
    }
}

And that's the problem, so we have to rearrange this array in your controller's method like this:

$files = array();
foreach ($_FILES['files'] as $property => $array)
{
    foreach ($array as $key => $value)
    {
        $files[$key][$property] = $value;
    }
}

And this will give you a proper array like this:

array(2) {
    [0]=>
    array(5) {
        ["name"]=>
        string(10) "imgOne.jpg"
        ["type"]=>
        string(10) "image/jpeg"
        ["tmp_name"]=>
        string(24) "C:\xampp\tmp\phpF867.tmp"
        ["error"]=>
        int(0)
        ["size"]=>
        int(358419)
    }
    [1]=>
    array(5) {
        ["name"]=>
        string(31) "imgTwo.png"
        ["type"]=>
        string(9) "image/png"
        ["tmp_name"]=>
        string(24) "C:\xampp\tmp\phpF878.tmp"
        ["error"]=>
        int(0)
        ["size"]=>
        int(72657)
    }
}

Now you can loop through this array and do_upload with CodeIgniter, but first lets reinitialize our $_FILES with the new array and then load upload library with our configs and loop through it like this:

$_FILES = $files;
$config['upload_path'] = FCPATH.'uploads/';
$config['allowed_types'] = 'gif|jpg|jpeg|png';
$config['max_size'] = '2048';
$this->load->library('upload', $config);
foreach ($_FILES as $fieldname => $fileobject)
{
    if (!empty($fileobject['name']))
    {
        $this->upload->initialize($config);
        if (!$this->upload->do_upload($fieldname))
        {
            $errors[$fileobject['name']] = $this->upload->display_errors();
        }
        else
        {
            $success[$fileobject['name']] = 'Success';
        }
    }
}

And that's it.