Support Techcherry Support Techcherry - 25 days ago 6
Ajax Question

getting error while uploading image via Ajax

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

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.