Codeigniter drag and drop files Multiple Images Upload

Contents

In this Post We Will Explain About is Codeigniter drag and drop files Multiple Images Upload With Example and Demo.

Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Codeigniter Multiple drag and drop image upload example

In this post we will show you Best way to implement Codeigniter 3 Tutorial – AJAX Drag and Drop files upload, hear for How to Drag and drop file upload using DropzoneJS and CodeIgniter with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Step 1: Download Fresh Codeigniter 3

In First of all we will simple download new create Codeigniter 3, Please first of all Download Codeigniter 3.

Step 2: Add Route using Codeigniter

application/config/routes.php

<?php
defined('BASEPATH') OR exit('No any direct script access allowed');

$route['default_controller'] = 'Live24ucom';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['image-upload'] = 'liveImageCtrl';
$route['image-upload/post']['post'] = 'liveImageCtrl/myUploadData';

Step 3: Create Controller using CI

application/controllers/liveImageCtrl.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class liveImageCtrl extends CI_Controller {

	public function index()
	{
		$this->load->view('dropzoneimage');
	}

	public function myUploadData()
	{
		$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

application/views/myPost.php

<!DOCTYPE html>
<html>
<head>
	<title>Codeigniter - Multiple Image upload Steps</title>
	<script src="jquery.js"></script>
	<link rel="stylesheet" href="bootstrap-3.min.css">
	<link href="min/dropzone.min.css" rel="stylesheet">
	<script src="dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h2>Codeigniter - simple Multiple Image uploadStep by step</h2>
			<form action="/image-upload/post" enctype="multipart/form-data" class="dropzone" id="image-upload" method="POST">
				<div>
					<h3>Simple upload usig CI_Controller multipart-form-data</h3>
				</div>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript">

	//simple script to upload images
	Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };
</script>

</body>
</html>

Simple run file using Codeigniter

php -S localhost:8000

http://localhost:8000/image-upload

Example

I hope you have Got Codeigniter Multiple drag and drop image upload example from scratch And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Codeigniter drag and drop files Multiple Images Upload

Step 1: Download Fresh Codeigniter 3

Step 2: Add Route using Codeigniter

Step 3: Create Controller using CI

Step 4: Create View Files

Related posts: