Ajax upload using codeigniter

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.

Source here and here

Oct23

3 Responses to “Ajax upload using codeigniter”

  1. One particular of the major elements that result in substantial harm to our skin
    cells is exposure to ultraviolet radiation of the sun.

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

  3. freddy sidauruk Says:
    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

Leave a Reply