getting error while uploading image via Ajax

Question

im having trouble in uploading a multiple file by ajax . here is my code.

HTML code:-

   <input type="file" id="txtBusinessImage" class="form-control" name="txtBusinessImageName[]" multiple >

    <input type="hidden" id="selectBusinessHiddenID" name="selectBusinessHiddenID" value="<?php echo $viewCompanyResult->company_id; ?>">

    <input type="button" id="uploadBusinessImg" value="Upload" >

Ajax Code:-

$("#uploadBusinessImg").on("click",function(e)
{
                var fd = new FormData();
                var file_data = $("#txtBusinessImage")[0].files; // for multiple files
                for(var i = 0;i<file_data.length;i++){
                    fd.append("file"+[i], file_data[i]);
                }
                var other_data = $("#selectBusinessHiddenID").serializeArray();
                $.each(other_data,function(key,input){
                    fd.append(input.name,input.value);
                });

                $.ajax({
                    url: '<?php echo site_url('Main_ctrl/upload_business_photo_do'); ?>',
                    data: fd,
                    enctype: 'multipart/form-data',
                    contentType: false,
                    processData: false,
                    type: 'POST', async : true,
                    success: function(data){
                        alert(data);
                    }
                });
});

When im calling upload_business_photo_do() function via Ajax then it does't able to recive the name of image $_FILES['file']['name']

upload_business_photo_do()
{
     $business_hidden_id=$this->input->post('selectBusinessHiddenID');

        /*code for image*/
        $config['upload_path']='./upload_101/';
        $config['allowed_types']= 'jpg|png|jpeg';
        $config['max_width'] = '6000';
        $config['max_height'] = '4500';

        $this->load->library('upload',$config);
        for($i=0; $i<count($_FILES['file']['name']); $i++)
        {
            $_FILES['userfile']['name']= $_FILES['file']['name'][$i];
            $_FILES['userfile']['type']= $_FILES['file']['type'][$i];
            $_FILES['userfile']['tmp_name']= $_FILES['file']['tmp_name'][$i];
            $_FILES['userfile']['error']= $_FILES['file']['error'][$i];
            $_FILES['userfile']['size']= $_FILES['file']['size'][$i];

            if(! $this->upload->do_upload())
            {
                /*----set flash message*/
                echo "error";

            }
            else
            {
                echo "done";

            }

        }
}

Answer 1

try to use like this , its simple and easy

    $("#uploadBusinessImg").on("click",function(e)
    {

               var formData = new FormData($("#form_name")[0]);
                $.ajax({
                    url: '<?php echo site_url('Main_ctrl/upload_business_photo_do'); ?>',
                    processData: false,
                    contentType: false,
                    data: formData,
                    type: 'POST', async : true,
                    success: function(data){
                        alert(data);
                    }
                });
      });

and in controller use like this

if($_FILES['txtBusinessImageName']) 
    {
        $file_ary =  $this->reArrayFiles($_FILES['txtBusinessImageName']);

        foreach ($file_ary as $file) 
        {
            print 'File Name: ' . $file['name'];
            print 'File Type: ' . $file['type'];
            print 'File Size: ' . $file['size'];
        }
     }

and also use this function for convert files data into array for multiple images data

function reArrayFiles(&$file_post) {

    $file_ary = array();
    $file_count = count($file_post['name']);
    $file_keys = array_keys($file_post);

    for ($i=0; $i<$file_count; $i++) {
        foreach ($file_keys as $key) {
            $file_ary[$i][$key] = $file_post[$key][$i];
        }
    }

    return $file_ary;
}

its working perfect , just try to use it . you don't need to add a extra codes of files with ajax.

Answer 2

use form tag and submit button for file upload.

<form method="post" enctype="multipart/form-data">
<input type="file" id="txtBusinessImage" class="form-control" name="txtBusinessImageName[]" multiple >
<input type="hidden" id="selectBusinessHiddenID" name="selectBusinessHiddenID" value="<?php echo $viewCompanyResult->company_id; ?>">
<input type="submit" id="uploadBusinessImg" value="Upload">
</form>

and remove enctype: 'multipart/form-data', from ajax call and try.

Change following for fetching files:

var file_data = $('#txtBusinessImage').prop('files')[0];   
var fd = new FormData();                  
fd.append('file', file_data);