Upload and view multiple images in the same web page in codeigniter - codeigniter

Question

This image shows what I need to do with codeigniter. I have one page with several div tags. I need to upload images and show them at the same place. But there should be 3 different images and 3 different file locations for these images to save. I tried number of ways. Please anyone with idea help me.
My controller
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Upload_Controller extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function index(){
$this->load->view('file_view', array(
'error' => ' '
));
}
public function file_view()
{
$this->load->view('file_view', array(
'error' => ' '
));
}
public function do_upload()
{
$config = array(
'upload_path' => "./uploads/",
'allowed_types' => "gif|jpg|png|jpeg|pdf",
'overwrite' => TRUE,
'max_size' => "2048000", // Can be set to particular file size , here it is 2 MB(2048 Kb)
'max_height' => "768",
'max_width' => "1024"
);
$this->load->library('upload', $config);
if ($this->upload->do_upload()) {
$data = array(
'upload_data' => $this->upload->data()
);
$this->load->view('file_view', $data);
} else {
$error = array(
'error' => $this->upload->display_errors()
);
$this->load->view('file_view', $error);
}
}
public function do_upload2()
{
$config = array(
'upload_path' => "./uploads/index2/",
'allowed_types' => "gif|jpg|png|jpeg|pdf",
'overwrite' => TRUE,
'max_size' => "2048000", // Can be set to particular file size , here it is 2 MB(2048 Kb)
'max_height' => "768",
'max_width' => "1024"
);
$this->load->library('upload', $config);
if ($this->upload->do_upload()) {
$data = array(
'upload_data' => $this->upload->data()
);
$this->load->view('file_view', $data);
} else {
$error = array(
'error1' => $this->upload->display_errors()
);
$this->load->view('file_view', $error);
}
}
}
?>
My View
<div id="1">
<?php echo form_open_multipart( 'upload_controller/do_upload');?>
<?php echo "<input type='file' name='userfile' size='20' />"; ?>
<?php echo "<input type='submit' name='submit' value='upload' /> ";?>
<?php echo "</form>"?>
</div>
<div id="2">
<h3>Your file was successfully uploaded!</h3>
<!-- Uploaded file specification will show up here -->
<ul>
<li>
</li>
<img alt="Your uploaded image" src="<?=base_url(). 'uploads/' . $upload_data['file_name'];?>">
</ul>
</div>
<div id="3">
<?php echo form_open_multipart( 'upload_controller/do_upload2');?>
<?php echo "<input type='file' name='userfile' size='20' />"; ?>
<?php echo "<input type='submit' name='submit' value='upload' /> ";?>
<?php echo "</form>"?>
</div>
<div id="4">
<h3>Your file was successfully uploaded!</h3>
<!-- Uploaded file specification will show up here -->
<ul>
<li>
</li>
<img alt="Your uploaded image" src="<?=base_url(). 'uploads/index2/' . $upload_data['file_name'];?>">
</ul>
<p>
<?php echo anchor('upload_controller/file_view', 'Upload Another File!'); ?>
</p>
</div>

Answer 1

Try This Code:
<form method="post" action="uploader/go" enctype="multipart/form-data">
<input type="file" name="image1" /><br />
<input type="file" name="image2" /><br />
<input type="file" name="image3" /><br />
<input type="file" name="image4" /><br />
<input type="file" name="image5" /><br />
<input type="submit" name="go" value="Upload!!!" />
</form>
Here Controller code:
class Uploader extends Controller {
function go() {
if(isset($_POST['go'])) {
/* Create the config for upload library */
/* (pretty self-explanatory) */
$config['upload_path'] = './assets/upload/'; /* NB! create this dir! */
$config['allowed_types'] = 'gif|jpg|png|bmp|jpeg';
$config['max_size'] = '0';
$config['max_width'] = '0';
$config['max_height'] = '0';
/* Load the upload library */
$this->load->library('upload', $config);
/* Create the config for image library */
/* (pretty self-explanatory) */
$configThumb = array();
$configThumb['image_library'] = 'gd2';
$configThumb['source_image'] = '';
$configThumb['create_thumb'] = TRUE;
$configThumb['maintain_ratio'] = TRUE;
/* Set the height and width or thumbs */
/* Do not worry - CI is pretty smart in resizing */
/* It will create the largest thumb that can fit in those dimensions */
/* Thumbs will be saved in same upload dir but with a _thumb suffix */
/* e.g. 'image.jpg' thumb would be called 'image_thumb.jpg' */
$configThumb['width'] = 140;
$configThumb['height'] = 210;
/* Load the image library */
$this->load->library('image_lib');
/* We have 5 files to upload
* If you want more - change the 6 below as needed
*/
for($i = 1; $i < 6; $i++) {
/* Handle the file upload */
$upload = $this->upload->do_upload('image'.$i);
/* File failed to upload - continue */
if($upload === FALSE) continue;
/* Get the data about the file */
$data = $this->upload->data();
$uploadedFiles[$i] = $data;
/* If the file is an image - create a thumbnail */
if($data['is_image'] == 1) {
$configThumb['source_image'] = $data['full_path'];
$this->image_lib->initialize($configThumb);
$this->image_lib->resize();
}
}
}
/* And display the form again */
$this->load->view('upload_form');
}
}