Upload image using Ajax in Codeigniter – Codeigniter में Ajax का इस्तेमाल करके image कैसे अपलोड करें? Codeigniter Ajax के इस tutorial में आज मैं आपको बताऊंगा की Codeigniter में Ajax / jQuery का इस्तेमाल करके image या file को कैसे अपलोड करें|
इस tutorial में हम सबसे easy method बतायेंगे जिससे आप<input type=" button ">के द्वारा form को submit कर सकते हैं| (upload image without submit button in Codeigniter). कई बार developers के साथ ऐसा होता है की पहले से form design किया हुआ रहता है जिसमें button के click event पर data save हो रहा होता है और उसमें उन्हें image या file अपलोड करना होता है इसलिए मैं इस tutorial में आपको ऐसी method के बारे में बता रहा हूँ जिससे आप किसी भी प्रकार से image अपलोड कर सकते हैं| इससे पिछले tutorial में हमने बताया था की Ajax का इस्तेमाल करके Codeigniter में database से data को कैसे डिलीट करें?
Upload image using Ajax in Codeigniter – Codeigniter में Ajax का इस्तेमाल करके image कैसे अपलोड करें
सबसे पहले हम एक table create करेंगे| मैंने यहाँ पर imagelist नाम का एक table create किया है जिसका code निचे दिया गया है| यहाँ पर MySQL database का इस्तेमाल किया गया है|
CREATE TABLE `imagelist` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`image` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1Table create करने के बाद मैंने Codeigniter setup किया है जिसमें अपने folder का नाम Ajax दिया है और उसके अन्दर database configuration में अपने database का नाम और access credentials set किया जिसका code निचे दिया गया है| इसे आप अपने database के नाम और access credentials के साथ change कर सकते हैं|
Code path: ajax/application/config/database.php
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'ajax_test',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);उसके बाद हमने एक modal बनाया है जिसमें की insertDynamicData() नाम का एक method बनाया| जब भी हम इस method को कॉल करेंगे तो हमें दो parameter pass करने होंगे पहला parameter table का नाम होगा और दूसरा parameter में array फॉर्मेट में वो data होगा जिसे हमें insert करना है|
Models file: ajax/application/models/Ajax_model.php
<?php
class Ajax_model extends CI_Model
{
public function createData($data)
{
$query = $this->db->insert('person',$data);
return $query;
}
public function fetchAllData($data,$tablename,$where)
{
$query = $this->db->select($data)
->from($tablename)
->where($where)
->get();
return $query->result_array();
}
public function fetchSingleData($data,$tablename,$where)
{
$query = $this->db->select($data)
->from($tablename)
->where($where)
->get();
return $query->row_array();
}
public function updateData($tablename, $data, $where)
{
$query = $this->db->update($tablename,$data,$where);
return $query;
}
public function deleteData($tablename,$where)
{
$query = $this->db->delete($tablename,$where);
return $query;
}
public function insertDynamicData($tablename, $data)
{
$query = $this->db->insert($tablename, $data);
return $query;
}
}अब हम एक controller file बनायेंगे जो की Controller folder के अन्दर होगा| इस controller file का नाम मैंने ImageUploadController.php दिया है| इसके अन्दर पहला method index() method है जिसमें हम अपने Views file को load करेंगे| उसके बाद second method uploadImageFun() method है जिसमें हम back-end में image अपलोड करने का process करेंगे|
Controller file: ajax/application/controllers/ImageUploadController.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ImageUploadController extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('ajax_model');
}
public function index()
{
$this->load->view('uploadImageFile');
}
public function uploadImageFun()
{
$stu_photo=$_FILES['document']['name'];
$stu_photo_exp=explode('.',$stu_photo);
$ext_type=$stu_photo_exp[count($stu_photo_exp)-1];
$stu_photo=strtotime('now').'.'.$ext_type;
$imagepath="uploads/stu_photo/".$stu_photo;
move_uploaded_file($_FILES["document"]["tmp_name"],$imagepath);
$result = $this->ajax_model->insertDynamicData('imagelist', array('image'=> $imagepath));
echo $result;
}
}अब मैंने एक Views file बनाया जिसका नाम uploadImageFile.php दिया| इस file के अन्दर एक button बनाया है और उस button के click पर एक modal show कराया है| जिसमें एक <input type="file"> बनाया है जहाँ से image select करेंगे| उसके बाद Upload button पर click करते ही image अपलोड हो जायेगा|
इसमें निचे में कुछ JavaScript के code लिखें हैं जिसमें एक function बनाया है जिसका नाम uploadImage() दिया है| यह function upload button के click पर fire होगा मतलब की upload button के click पर यह function कॉल होगा| इस function के कॉल होते ही form submit हो जायेगा| यहाँ पर Form के id के through फॉर्म को submit कराया गया है|
Views File: ajax/application/views/uploadImageFile.php
<!DOCTYPE html>
<html>
<head>
<title>Upload Image</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br><br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createModal">
Upload Image
</button><br><br>
<form id="createForm" enctype="multipart/form-data">
<!-- Modal -->
<div class="modal fade" id="createModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Upload Image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Image</label>
<input type="file" class="form-control" name="document" required="" id="documentId">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="uploadImage()">Upload</button>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function uploadImage()
{
$('#createForm').submit();
}
$(document).ready(function (e) {
$('#createForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "<?php echo base_url('ImageUploadController/uploadImageFun'); ?>",
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(response){
alert('successfully uploaded');
$('#createForm')[0].reset();
$('#createModal').hide();
},
error: function(response){
alert(response);
}
});
}));
});
</script>
</body>
</html>Working process – Uploading process कैसे हो रहा है?
अब हम जानेंगे की file अपलोड कैसे हो रहा है|सबसे पहले हमने browser में अपने file को controllername की मदद से open किया| यहाँ पर मैं localhost पर बना रहा हूँ इसलिए मेरा URL कुछ इस प्रकार है| http://localhost/ajax/ImageUploadController
Browser में हमें एक button show होगा जिस पर click करने के बाद modal open होगा| और उसमें एक File upload करने का field show होगा जिस पर click करके हम file select करेंगे| File select करने के बाद हम अपलोड button पर click करते हैं अपलोड button पर click करते ही JavaScript में लिखा गया uploadImage() function call होता है और फिर form submit होता है|
Form submit होने के बाद form data के साथ controller के function call होते हैं और वहां पर Image name generate होकर के uploading तक के process execute होते हैं|
Project Download Link: Click here to download
Video Tutorials
Conclusion and Final Words
Upload image using Ajax in Codeigniter के इस tutorial में हमने Submit और On click दोनों ही method से image अपलोड करने का तरीका share किया है| इसको आप अपने अनुसार बहुत ही आसानी से edit कर सकते हैं|
Leave a Reply