How to upload array of post and files with ajax using Codeigniter

I will show you how to upload multiple post data and files using array in Codeigniter, AJAX and jQuery without page refresh. This multiple post data and files array upload tutorial example is very helpful to implement the upload functionality. In this example the files are selected using the browse button and files are uploaded to the directory. Codeigniter controller stores files into the defined location and returns response as success or failure messages from the controller.

HTML Code

<form  id="secd_test" method="post" enctype="multipart/form-data" >
	<table class="table">
		<tr>
			<td><input type="file"  name="return[0][result_file][]"  class="result_file" ></td>
			<td><input type="text"  name="return[0][name]"  class="form-control" ></td>
			<td><input type="text"  name="return[0][address]"  class="form-control" ></td>
		</tr>
		<tr>
			<td><input type="file"  name="return[1][result_file][]" class="result_file" ></td>
			<td><input type="text"  name="return[1][name]"  class="form-control" ></td>
			<td><input type="text"  name="return[1][address]"  class="form-control" ></td>
		</tr>
		<tr>
			<td><input type="file"  name="return[2][result_file][]" class="result_file" ></td>
			<td><input type="text"  name="return[2][name]"  class="form-control" ></td>
			<td><input type="text"  name="return[2][address]"  class="form-control" ></td>
		</tr>
		<tr>
			<td colspan="100%"><input id="image_upload" value="submit" type="submit" ></td>
		</tr>
	</table>
</form>

Jquery and Ajax Code

<script type="text/javascript">
	$(document).ready(function (e) {
		$("#secd_test").on('submit',(function(e) {
			e.preventDefault();
			$.ajax({
				url: "<?=base_url()?>home/multipleadd_data",
				type: "POST",
				data:  new FormData(this),
				contentType: false,
				cache: false,
				processData:false,
				success: function(data){
					alert('Success');
					location.reload();
				},
		   });
		}));
	});
</script>

Controller function(multipleadd_data) Code

public function multipleadd_data()
{
	$stock_item_val = $this->input->post('return');
	foreach($stock_item_val as $key => $st_val)
	{
		if(!empty($_FILES['return']['name'][$key]))
		{
			foreach ($_FILES['return']['name'][$key] as $name => $value)
			{
				$sourcePath = $_FILES['return']['tmp_name'][$key]['result_file'][0];//[$name]['result_file'][0]
				if(!empty($sourcePath))
				{
					$image_name=date('ymdHis').$_FILES['return']['name'][$key]['result_file'][0];
					$targetPath = "img/".$image_name;
					move_uploaded_file($sourcePath,$targetPath); 
				}
				else
				{
					$image_name='';
				}
			}
		}
		else
		{
			$image_name='';
		}
		
		$data = array(
				'img_path' => $image_name,
				'name' => $st_val['name'],
				'address' => $st_val['address']
		);
		$this->db->insert('multiple_image', $data);
	}
	
	echo "success";
}

Output

Array
(
    [img_path] => 17100304350812.jpg
    [name] => hardik
    [address] => surat
)
Array
(
    [img_path] => 17100304350811.jpg
    [name] => tushar
    [address] => surat, gujarat
)
Array
(
    [img_path] => 17100304350817.jpg
    [name] => ram
    [address] => avadh
)