Write a first windows application
Write the famous “Hello, World” program: To output text to the console. To output text to a dialog window. To make the dialog appear after selecting a menu item. Then, if yo
Read More
CodeIgniter upload multiple images using drag and drop using dropzone
In this example we are going to explain how to upload mulitple images using dropzone library in Codeigniter. Simple drag and drop image on the webpage. dropzone jQuery plugin, you can easily upload images on the server. if you have any requirment of uploading builk images dropzone is the best option. Dropzone has a preview and remove option where you can add, view and remove option.
Dropzone provides the different type of validation rules like max file upload, upload specific type of file like you can set the validation rule to take only jpeg extension. As a Codeigniter Development Company india we have used Dropzone in many of our web based application development company in Coimbatore.
Follow below Steps to upload multiple images using dropzone
Step 1: Download Codeigniter latest Version
In this first step, Download Codeigniter latest Version to start with scratch.
Step 2: Add Routes
In this step, I will setup two routes in route file to handle the request to upload file on the server.
Routes file Path - application/config/routes.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
defined('BASEPATH') OR exit('No direct script access allowed');
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['dropzone-upload-image'] = 'ImageController';
$route['dropzone-upload-image/post']['post'] = 'ImageController/uploadImage';
?>
$route['dropzone-upload-image/post']['post'] = 'ImageController/uploadImage';
?>
Step 3: Create Controller
In this step, create a controller "ImageController.php".
Controller file Path - application/controllers/.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
defined('BASEPATH') OR exit('No direct script access allowed');
class ImageController extends CI_Controller {
public function index()
{
$this->load->view('fileupload');
}
{
$this->load->view('fileupload');
}
public function uploadImage()
{
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 1024;
$this->load->library('upload', $config);
$this->upload->do_upload('file');
print_r('Image Uploaded Successfully.');
exit;
}
} ?>
Step 4: Create View Files "fileupload.php"
In this step, create a view file "fileupload.php" to render the HTML form to upload image.
View file Path application/views/"fileupload.php"
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter - Upload multiple images using dropzone.js</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.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>
<html>
<head>
<title>Codeigniter - Upload multiple images using dropzone.js</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.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">
<div class="col-md-12">
<form a ction="dropzone-upload-image/post" enctype="multipart/form-data" class="dropzone" id="image-upload" method="POST">
<div>
<center><h3>Click here to upload multiple image</h3></center>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form a ction="dropzone-upload-image/post" enctype="multipart/form-data" class="dropzone" id="image-upload" method="POST">
<div>
<center><h3>Click here to upload multiple image</h3></center>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize:1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
Dropzone.options.imageUpload = {
maxFilesize:1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
</html>
Confused about your business model?
Request a FREE Business Plan.
+91 ▼ Related Posts
W
Travel |
The Future of Corporate Travel: Key Feature of Modern Travel Management Software
In today's hectic travel environment, effectiveness and planning are critical. The correct tools can make all the difference, whether you are an individual organizing a holiday or a business execu
Read More
How to disable browser cache easily for particular, individual and separate function and controller in Codeigniter
This article we are going shows how to disable browser cache easily for particular, individual and separate functions and controller in Codeigniter. We face some kind of problems in real life when bro
Read More