Ajax upload using codeigniter
Filed under Programming
This time i will share about upload an image using ajax and jquery. I made this tutorial as a documentation when i made an application program using codeigniter. This tutorial needs Codeigniter framework. Ok, stop your blabbermouth and start coding. Here is the short explanation taken from the author here.
This AjaxFileUpload Plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enough for normal use. Its idea is to create a iframe and submit the specified form to it for further processing.
In this hacked version, it submits the specified file type of input element only rather than an entire form
how to use it
1.include jquery.js & ajaxfileupload.js javascript files in views (upload_form.php)
[ad name=”ad-1″]
[php]
if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);?>
<html>
<head>
<title>JQuery – CodeIgniter File Upload Demo</title>
<link href="<?php echo base_url()?>asset/style/ajaxfileupload.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="<?php echo base_url()?>asset/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>asset/js/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload
(
{
url:'<?php echo site_url()?>/upload/do_upload’,
secureuri:false,
fileElementId:’fileToUpload’,
dataType: ‘json’,
success: function (data, status)
{
if(typeof(data.error) != ‘undefined’)
{
if(data.error != ”)
{
$("#info").html(data.error);
}else
{
$("#info").html(data.msg);
}
}
},
error: function (data, status, e)
{
$("#info").html(e);
}
}
)
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>JQuery – CodeIgniter File Upload Demo</h1>
<p>Upload file using CodeIgniter File Uploading Class and JQuery</p>
<p>
Need any Web-based Information System?<br> Please <a href="http://www.putraweb.net/about">Contact Us</a><br>
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>Please select a file and click Upload button</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> </tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
<img id="loading" src="<?php echo base_url()?>asset/images/loading.gif" style="display:none;">
<div id="info"></div>
</div>
</body>
</html>[/php]
As for the controller
[php]
class Upload extends Controller {
function Upload()
{
parent::Controller();
}
function index()
{
$this->load->view(‘upload_form’);
}
function do_upload()
{
$error = "";
$msg = "";
$config[‘upload_path’] = ‘./upload/’;
$config[‘allowed_types’] = ‘doc|xls|ppt|pdf|rar|zip’;
$config[‘max_size’] = ‘1000’;
$this->load->library(‘upload’, $config);
$this->upload->display_errors(”,”);
if ( ! $this->upload->do_upload("fileToUpload"))
{
$error = $this->upload->display_errors();
}
else
{
$msg = "Success";
}
echo "{";
echo "error: ‘" . $error . "’,n";
echo "msg: ‘" . $msg . "’n";
echo "}";
}
}[/php]
Don’t forget to create upload folder in your codeigniter directory.
Try it and let me know if you have some problems.
Share This
Oct23
July 19, 2013 at 12:39 pm
One particular of the major elements that result in substantial harm to our skin
cells is exposure to ultraviolet radiation of the sun.
July 23, 2015 at 10:17 am
Am using your code (Ajax upload using codeigniter) but its not working for me. in firebug it is showing “$.ajaxFileUpload is not a function” please help me.
October 6, 2015 at 12:37 pm
where i can get the file ajaxfileupload.js cause the website is will selling ?
please if you have the script please throw to my email
sidaurukfreddy@gmail.com