Home >>Codeigniter Tutorial >Codeigniter multiple drag and drop image upload
Codeigniter multiple drag and drop image upload
Codeigniter multiple drag and drop image upload
A fundamental way to upload the image
Web applications or websites are incomplete without the images. With the help of lucrative images, one can attract the user towards their web application. Moreover, uploading the image is the general key for web applications. There are numerous options related to uploading the image. Generally, developers use input with multiple uploading of images. Somehow, it does not look attractive. Apart from it, one can also select the dropzone.js.
What does dropzone.js term stand for?
Dropzone.js is defined as an open-source JavaScript library. By this, you will be able to drag and drop image upload in Codeigniter. This is helpful when you are working on larval, PHP, and any framework. Moving further, it also offers the option of image upload and displays in Codeigniter.
It is one of the easiest ways to upload multiple images with extensions.When the person thinks about uploading the image on the web sites, then the first question strikes in his mind is how to upload images in Codeigniter.
Here is the list of steps that will be helpful for you to image upload and display in Codeigniter.
Step 1: Create Controller(ImageController.php) and paste given below code
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Image extends CI_Controller
{
public function index()
{
$this->load->view('image');
}
public function imageUploadPost()
{
$config['upload_path'] = './img/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 1024;
$this->load->library('upload', $config);
$this->upload->do_upload('file');
echo "<h1>Multiple Image uploaded successfully</h1>";
exit;
}
}
Step 2: Create View(image.php) and paste given below code
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter multiple drag and drop image upload</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
<div class="container">
<div class="row form-group">
<form action="<?php echo base_url('Image/imageUploadPost'); ?>" enctype="multipart/form-data" class="dropzone" id="image-upload" method="POST">
<div class="col-md-12">
<h2 class="text-primary">Codeigniter multiple drag and drop image upload</h2>
<div>
<h3 class="text-warning">Upload Multiple Image By Click On Box</h3>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input class="btn btn-primary btn-lg" type="submit" value="upload"/>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload =
{
maxFilesize:1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
Total Downloads : 85
Login / Register To Download