Home » Codeigniter drag and drop files Multiple Images Upload

Codeigniter drag and drop files Multiple Images Upload

Codeigniter drag and drop files Multiple Images Upload

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!.

Read Also:  how to upload multiple images in codeigniter?

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

Read Also:  PHP isset Multiple Variables Example

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Dropzone Multiple File Upload using PHP Example
  2. Read Also:  Laravel Check Array Empty in Blade Example
  3. Read Also:  codeigniter 3 Multiple File Drag and Drop Upload
  4. Read Also:  How to Upload Images on Server in PHP?
  5. Read Also:  How to get current url with or without query string using Vuejs
  6. Read Also:  Shorthand comparisons using PHP Ternary Operator
  7. Read Also:  Laravel 5.7 Routing Required Parameter
  8. Read Also:  WordPress Security Tricks to Secure WordPress Website
  9. Read Also:  PHP upload custom file in ckeditor Example
  10. Read Also:  PHP Jquery Ajax Upload Multiple Images with Preview

Leave a Comment

Your email address will not be published. Required fields are marked *