How to Upload Files with CodeIgniter and AJAX

Todd Francis on Sep 8th 2011 with 113 comments

Tutorial Details

Program: CodeIgniter, jQuery, AjaxFileUpload
Difficulty: Intermediate
Estimated Completion Time: 45-60 Minutes

Uploading files asnychronously can be a pain at the best of times, but when coupled with CodeIgniter, it can be a particularly frustrating experience. I finally found a way that not only works consistently, but keeps to the MVC pattern. Read on to find out how!

Preface

In this tutorial, we’ll be using the PHP framework CodeIgniter, the JavaScript framework jQuery, and the script AjaxFileUpload.

It’s assumed you have a working knowledge of CodeIgniter and jQuery, but no prior knowledge of AjaxFileUpload is necessary. It is also assumed that you already have an install of CodeIgniter already set up.

For the sake of brevity, the loading in of certain libraries/models/helpers has been omitted. These can be found in the source code supplied, and is pretty standard stuff.

You’ll also need a database, and a table, called files. The SQL to create said table is:

CREATE TABLE `files` (
  `id` int NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `filename` varchar(255) NOT NULL,
  `title` varchar(100) NOT NULL
);

By the end of the tutorial, your file structure should look similar to this (omitting unchaged folders/files):

public_html/
– application/
—- controllers/
—— upload.php
—- models/
—— files_model.php
—- views/
—— upload.php
—— files.php
– css/
—- style.css
– files/
– js/
—- AjaxFileUpload.js
—- site.js

Step 1 - Creating the Form

Set up the Controller

First, we need to create our upload form. Create a new Controller, called upload, and in the index method, render the view upload.

Your controller should look like this:

class Upload extends CI_Controller 
{
	public function __construct()
	{
		parent::__construct();
		$this->load->model('files_model');
		$this->load->database();
		$this->load->helper('url');
	}

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

We are also loading in the files model, so we can use it in our methods. A better alternative may be to autoload it in your actual project.

Create the Form

Create your view, upload.php. This view will contain our upload form.

<!doctype html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="<?php echo base_url()?>js/site.js"></script>
	<script src="<?php echo base_url()?>js/ajaxfileupload.js"></script>
	<link href="<?php echo base_url()?>css/style.css" rel="stylesheet" />
</head>
<body>
	<h1>Upload File</h1>
	<form method="post" action="" id="upload_file">
		<label for="title">Title</label>
		<input type="text" name="title" id="title" value="" />

		<label for="userfile">File</label>
		<input type="file" name="userfile" id="userfile" size="20" />

		<input type="submit" name="submit" id="submit" />
	</form>
	<h2>Files</h2>
	<div id="files"></div>
</body>
</html>

Don’t forget to place ajaxfileupload.js in js/.

As you can see, we are loading in our scripts at the top; jQuery, AjaxFileUpload, and our own js file. This will house our custom JavaScript.

Then, we are simply creating a standard HTML form. The empty #files div is where our list of uploaded files will be.

Some Simple CSS

Just so it doesn’t look quite so bad, lets add some basic CSS to our file style.css in css/.

h1, h2 { font-family: Arial, sans-serif; font-size: 25px; }
h2 { font-size: 20px; }

label { font-family: Verdana, sans-serif; font-size: 12px; display: block; }
input { padding: 3px 5px; width: 250px; margin: 0 0 10px; }
input[type="file"] { padding-left: 0; }
input[type="submit"] { width: auto; }

#files { font-family: Verdana, sans-serif; font-size: 11px; }
#files strong { font-size: 13px; }
#files a { float: right; margin: 0 0 5px 10px; }
#files ul {	list-style: none; padding-left: 0; }
#files li { width: 280px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid #CCC; }

Step 2 - The Javascript

Create and open site.js in js/. Place the following code:

$(function() {
	$('#upload_file').submit(function(e) {
		e.preventDefault();
		$.ajaxFileUpload({
			url 			:'./upload/upload_file/', 
			secureuri		:false,
			fileElementId	:'userfile',
			dataType		: 'json',
			data			: {
				'title'				: $('#title').val()
			},
			success	: function (data, status)
			{
				if(data.status != 'error')
				{
					$('#files').html('<p>Reloading files...</p>');
					refresh_files();
					$('#title').val('');
				}
				alert(data.msg);
			}
		});
		return false;
	});
});

The JavaScript hijacks the form submit and AjaxFileUpload takes over. In the background, it creates an iframe and submits the data via that.

We’re passing across the title value in the data parameter of the AJAX call. If you had any more fields in the form, you’d pass them here.

We then check our return (which will be in JSON). If no error occured, we refresh the file list (see below), clear the title field. Regardless, we alert the response message.

Step 3 - Uploading the File

The Controller

Now on to uploading the file. The URL we are uploading to is /upload/upload_file/, so create a new method in the upload controller, and place the following code in it.

public function upload_file()
{
	$status = "";
	$msg = "";
	$file_element_name = 'userfile';
	
	if (empty($_POST['title']))
	{
		$status = "error";
		$msg = "Please enter a title";
	}
	
	if ($status != "error")
	{
		$config['upload_path'] = './files/';
		$config['allowed_types'] = 'gif|jpg|png|doc|txt';
		$config['max_size']	= 1024 * 8;
		$config['encrypt_name'] = TRUE;

		$this->load->library('upload', $config);

		if (!$this->upload->do_upload($file_element_name))
		{
			$status = 'error';
			$msg = $this->upload->display_errors('', '');
		}
		else
		{
			$data = $this->upload->data();
			$file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']);
			if($file_id)
			{
				$status = "success";
				$msg = "File successfully uploaded";
			}
			else
			{
				unlink($data['full_path']);
				$status = "error";
				$msg = "Something went wrong when saving the file, please try again.";
			}
		}
		@unlink($_FILES[$file_element_name]);
	}
	echo json_encode(array('status' => $status, 'msg' => $msg));
}

This code loads in the CodeIgniter upload library with a custom config. For a full reference of it, check out the CodeIgniter docs.

We do a simple check to determine if the title is empty or not. If it isn’t, we load in the CodeIgniter upload library. This library handles a lot of our file validation for us.

Next, we attempt to upload the file. if successful, we save the title and the filename (passed in via the returned data array).

Remember to delete the temp file off the server, and echo out the JSON so we know what happened.

The Model

In keeping with the MVC pattern, our DB interaction will be handled by a model.

Create files_model.php, and add the following code:

class Files_Model extends CI_Model {

	public function insert_file($filename, $title)
	{
		$data = array(
			'filename'		=> $filename,
			'title'			=> $title
		);
		$this->db->insert('files', $data);
		return $this->db->insert_id();
	}

}

Files Folder

We should also create the folder our files will be uploaded to. Create new file in your web root called files, making sure it is writable by the server.

Step 4 - The File List

Upon a successful upload, we need to refresh the files list to display the change.

The JavaScript

Open site.js and add the following code to the bottom of the file, below everything else.

function refresh_files()
{
	$.get('./upload/files/')
	.success(function (data){
		$('#files').html(data);
	});
}

This simply calls a url and inserts the returned data into a div with an id of files.

We need to call this function on the page load to initially show the file list. Add this in the document ready function at the top of the file:

refresh_files();

The Controller

The URL we are calling to get the file list is /upload/files/, so create a new method called files, and place in the following code:

public function files()
{
	$files = $this->files_model->get_files();
	$this->load->view('files', array('files' => $files));
}

Quite a small method, we use our model to load in the currently saved files and pass it off to a view.

The Model

Our model handles the retrieval of the file list. Open up files_model.php, and add in the get_files() function.

public function get_files()
{
	return $this->db->select()
			->from('files')
			->get()
			->result();
}

Quite simple really: select all the files stored in the database.

The View

We need to create a view to display the list of files. Create a new file, called files.php, and paste in the following code:

<?php
if (isset($files) && count($files))
{
	?>
		<ul>
			<?php
			foreach ($files as $file)
			{
				?>
				<li class="image_wrap">
					<a href="#" class="delete_file_link" data-file_id="<?php echo $file->id?>">Delete</a>
					<strong><?php echo $file->title?></strong>
					<br />
					<?php echo $file->filename?>
				</li>
				<?php
			}
			?>
		</ul>
	</form>
	<?php
}
else
{
	?>
	<p>No Files Uploaded</p>
	<?php
}
?>

This loops through the files and displays the title and filename of each. We also display a delete link, which include a data attribute of the file ID.

Deleting the File

To round off the tutorial, we’ll add in the functionality to delete the file, also using AJAX.

The JavaScript

Add the following in the document ready function:

$('.delete_file_link').live('click', function(e) {
	e.preventDefault();
	if (confirm('Are you sure you want to delete this file?'))
	{
		var link = $(this);
		$.ajax({
			url			: './upload/delete_file/' + link.data('file_id'),
			dataType	: 'json',
			success		: function (data)
			{
				files = $(#files);
				if (data.status === "success")
				{
					link.parents('li').fadeOut('fast', function() {
						$(this).remove();
						if (files.find('li').length == 0)
						{
							files.html('<p>No Files Uploaded</p>');
						}
					});
				}
				else
				{
					alert(data.msg);
				}
			}
		});
	}
});

It’s always a good idea to get a user confirmation when deleting information.

When a delete link is clicked, we display a confirm box asking if the user is sure. If they are, we make a call to /upload/delete_file, and if successful, we fade it from the list.

The Controller

Like above, the url we are calling is /upload/delete_file/, so create the method delete_file, and add the following code:

public function delete_file($file_id)
{
	if ($this->files_model->delete_file($file_id))
	{
		$status = 'success';
		$msg = 'File successfully deleted';
	}
	else
	{
		$status = 'error';
		$msg = 'Something went wrong when deleteing the file, please try again';
	}
	echo json_encode(array('status' => $status, 'msg' => $msg));
}

Again, we let the model do the heavy lifting, echoing out the output.

The Model

We’re now at the final piece of the puzzle: our last two methods.

public function delete_file($file_id)
{
	$file = $this->get_file($file_id);
	if (!$this->db->where('id', $file_id)->delete('files'))
	{
		return FALSE;
	}
	unlink('./files/' . $file->filename);	
	return TRUE;
}

public function get_file($file_id)
{
	return $this->db->select()
			->from('files')
			->where('id', $file_id)
			->get()
			->row();
}

Because we only pass the ID, we need to get the filename, so we create a new method to load the file. Once loaded, we delete the record and remove the file from the server.

That’s it, tutorial complete! If you run it, you should be able to upload a file, see it appear, and then delete it; all without leaving the page.

Final Thoughts

Obviously, the views can do with some prettying up, but this tutorial should have given you enough to be able to integrate this into your site.

There are a few shortcomings to this method, however:

You can only upload one file at a time, but this can rectified easily by using a service like Uploadify.
There is no progress bar built into the script.
We could reduce the SQL calls by updating the files div upon file upload, instead of fully replacing them.

Thanks for reading!

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Todd Francis

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a UK Web Developer based in Leeds, currently working for Coding Futures. You can see more of my work at my personal site, Toddish.co.uk, or follow me on.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

Ahmet
Super article thank you so much.
That Guy
Stop it Nettuts!
Every time I start working on something different you post a relevant article. I think you are stalking me and I don’t appreciate it!
No but seriously, nice tut!
http://oddnetwork.org haliphax
Very nice tutorial. It’s been so long since I’ve seen something on this site I can actually *use*. Thank you!
Juan Carlos Rois
Codeigniter and tutorials like this are a Godsend! Thanks and keep up the good work!
Magnus
Except from having a bit to much business logic in the “upload_file” method in the upload controller, it’s a good article.
Most of the code in the method “upload_file” should be in the model instead. I try to follow the concept of “Skinny Controller, Fat Model”.

http://toddish.co.uk Todd
I’ve always preferred keeping my models for mainly db logic, but I’d agree that a lot of the logic in the controller could be moved to a library.
Out of curiosity, would you put things like the form validation in the model as well?

Matthieu
As far as I’m concerned, i’ll put data validation in the model. Controllers just need to handle UI bindings and Routing. Models handle datas (Validation, CRUD in database, cookies, session). This is my personal practice.
Magnus
I agree with Mathieu. Everything that is application specific data handling/validation or what not, should go in to the model. That includes form validation.
I try to keep the libraries “clean” from application specific tasks. I let the libraries be more or less self contained for specific functions. A library shouldn’t have any dependencies while a model can load other models, configs or helpers.
Magnus
…and the config you are sending to the uploader (path, max size, file types and so) should of course be in a config file. Try to never put any hard coded values in the code. (I’ve learned that the hard way :p)

Matthieu
Completely agree with Magnus. “Fat model, skinny controller” is an excellent practice, I think. See this article:
http://blog.astrumfutura.com/2008/12/the-m-in-mvc-why-models-are-misunderstood-and-unappreciated/

Magnus
Thanks! I was acctually googling for that exact article when I wrote my comment but didn’t find it :D
It’s a really good article that everyone should read.
http://toddish.co.uk Todd Francis
Cheers, I’ll give it a read :)

http://ekrc.net Ekrem
Good example, we’ll look forward to more Codeigniter-based examples; thank you!
http://nfvi.is Kristján
Nice article, those CI tutorials are worth a pile of gold!
http://maomuffy.blogspot.com Mfawa Alfred Onen
Nicely done mate! Magnus is also right in terms of skinny controllers fat models. Once more thanks for this.
http://rommelcastro.me Rommel Castro A
more CI tuts plz!!!!
http://eshoptimewa.com fananicenter
nice.. thanks you
Michael
thanks a lot, it’s a long time ago, since there was a useful tut for me ;)
this one perfectly matchs my next project.
http://www.mediaty.com Martin
Thanks for this article, CodeIgniter is my favorite php framework and i found this very usefully :)
http://nicholaskreidberg.com Nicholas Kreidberg
Very solid and detailed tutorial! Just one thing in the intro paragraph, asynchronously is spelled wrong.
Cheers!

http://toddish.co.uk Todd
Author
I proof read it so many times as well!

Brad
Excellent tut, and the MAC wasn’t mentioned once! I definitely look forward to codeigniter and Jquery tuts!
http://taylorhutchison.com Taylor Hutchison
Great tutorial. I would like to know more about CI/Ajax and uploading data tied to a single user that should be considered secure. Specially how to look at sessions to verify that the ajax data is coming from a logged in user. Is this more simple than I think it is?

Jordi
Yes, would be great to see a second tutorial about this. Uploading files is very useful, would be wonderful to see a progress bar, security issues resolved…
Anyway thank you very much for this one!

begs
Yes, the progress bar tutorial would be really nice. Is this possible with only PHP + Javascript or do we need pearl or Flash for this?

http://toddish.co.uk Todd
If you’ve already got an auth system, just check the user is logged in on the ajax call how you’d normally check it.
If you’re worried about CSRF, generate a hash on the form submit, save it to session and submit it. Then check it’s the same when validating the form.

http://www.jeeglo.com/ Fraz Ahmed
Quick Tip: If you want to upload the file as soon as user selects a file. You can try some similar code.
$(function() {
$(‘#userfile’).change(function(){ajaxFileUpload();});
});
You will need to define this ajaxFileUpload(); function.
Hristo
it is an iframe based upload not ajax
Spacer
nice tut please make more CI tuts would really like to see a tut on multi uploading as this is a pain and uploadify just gives a lot of issues when canceling a selected upload
http://www.tomva.be Tom Van Assche
Fantastic! Keep it up and I will stay premium, even for free tuts :)
http://fabiojgrocha.com Fábio Rocha
Great tut. Please change $_POST to $this->input->post, in my opinion it’s the best way to retrieve post data in codeigniter.

http://toddish.co.uk Todd
It doesn’t make a whole lot of difference unless you are XSS filtering, but for the purposes of best practices, I probably should have used the Input class.
I’ll remember for next time :)

Ido
Great tut! thank you. i was just looking for something like that
http://www.aprenderphp.net/ Rodrigo
Nice tut, thanks for all this. It’s really helpful.
Stefano
Good tutorial indeed, just a silly question: where’s the source code you mention at the beginning of the article? :)

http://toddish.co.uk Todd Francis
Ah sorry, I presumed with would be added to the tutorial. You can find it here:
http://toddish.co.uk/ajax-ci-nettuts.zip

Levani
Tutorials about codeigniter are always welcome. Well done!
But I think http://www.uploadify.com/ is a better solution for handling ajax uploads… :)

http://toddish.co.uk Todd Francis
I have previously used uploadify, but I couldn’t get it to work well with CodeIgniter. I found I had to point it to a script, not a URL, which completely broke out of the framework.
If there is a way to do this using uploadify, even better!
http://blog.dalibor-sojic.info Dalibor Sojic
I am using uploadify with codeigniter, but this solution is much better:
1. uploadify is flash component, so it requires flash. This example is flash independent.
2. Using uploadify I have issues with sessions/cookies e.t.c.
http://blog.dalibor-sojic.info Dalibor Sojic
However, Uploadify is not ajax uploader. It is Flash uploader.

http://codesonweb.com napster
I thought this was a pure ajax upload :) I don’t really get the point here, why wasting time usring ajaxFileUpload if we can just set the Form “target” attribute to an IFRAME? both will give you same result.
ahmed sherif
line 11 on “deleting the file” js
files = $(#files);
should be : files = $(“#files”);
AWESOME TUT i was sooooooooooooooooooooooooo looking for this
http://none Alex
Nice topic… I love it so much!!
http://brianswebdesign.com Brian Temecula
I’ve been using valums ajax uploader (the older version) for a while, which works great. It’s available on Github: https://github.com/valums/ajax-upload . I’d use the newer version but the CodeIgniter upload class doesn’t allow for data to be collected from php://input. At least I couldn’t figure it out. The new version does come with its own processing script, but I’d rather stick with CI when possible. Has anyone figured out how to extend the upload class to get a file in php://input?

http://toddish.co.uk Todd Francis
I had a play with it, but I couldn’t get it to work (using the latest one), which is why I eventually stuck with ajaxFileUpload.

http://brianswebdesign.com Brian Temecula
I had a look at the Upload class today, and pretty sure I could extend the class to get the file in php://input. I’ll do some testing, and if all goes well, and if time permits, submit a pull request to CodeIgniter. The problem I foresee would be identifying a file type using it’s binary data, and not having anything else to work with, like a file extension, filename, etc.
Another thing I’d like to do is extend the Upload class so that I can store a file in a database, instead of the file system. … and another thing I’d like to do is extend the Upload class so I can FTP the file to another server, instead of storing it on the file system. I’ve got a lot of desires! I really think the Upload class needs to be a driver, and not a library. It might make it easier to accomplish these things.

GG
Does AJAX file upload work on IE??
anand
Hi,
I am getting javascript error.
Error: $.get(“./upload/files/”).success is not a function.
give me solution……
anand
Hi,
I am getting javascript alert.. (Please enter a title.).

http://toddish.co.uk Todd
It sounds silly, but did you enter a title?

Toby
I get the same thing.

Tai
Can you send me your source code of this tut?
Thanks

http://toddish.co.uk Todd
Author
I posted the source a bit further up :) http://toddish.co.uk/ajax-ci-nettuts.zip

Tai
I did step by step as your tut but when I click “Submit Query” button, nothing is happen. Please tell me why? I’m a newbie in CodeIgniter !

Pawel
check RewriteBase in .htaccess

http://www.okadadesign.no/blog shinokada
@Tai: Don’t forget to modify config.php and database.php. And create a database. It is working for me.
@Todd: I found an interesting thing. If you go to http://localhost:8888/ci_fileuploader/index.php/upload it shows nicely. But when I visit http://localhost:8888/ci_fileuploader/index.php/upload/ (can you see the / at the end?) then two forms comes out. Is it only me?

http://toddish.co.uk Todd Francis
I see what you mean. I didn’t come across this when I was making it.

Elliott
Would anyone be willing to post the full source for this tutorial, with the directory structure in-tact?

http://toddish.co.uk Todd Francis
I posted the source a few comments up :)

boneg
Great thanks! I built my AJAX upload controller based on your example. But I use “ON” native xss-filter function, so added secure token to AJAX request data.
(sorry for my bad English)
siros
great tutorial thank you ,
it’s not good to mix html with native php function if codeigniter can do most of what you did in (codeigniter way) :D
Elliott
This may seem like a nub question. I’ll be the first to admit my knowledge of JavaScript is limited, I’m very desperately trying to learn, though. It seems I’m having a bit of trouble when attempting to add additional fields to the form. Here’s a quick breakdown of the trouble I’m running into.
Adding the field to the form:
Category
Add conditions / make changes to the controller:
if (empty($_POST['category']))
{
$status = “error”;
$msg = “Please select a category”;
}
$file_id = $this->files_model->insert_file($data['file_name'], $_POST['title'], $_POST['category']);
if($file_id)
Add Appropriate Code To The Controller:
public function insert_file($filename, $title, $category)
{
$data = array(
‘filename’ => $filename,
‘doc_title’ => $title,
‘category_id’ => $category
The error message I receive when submitting the form is: “Please select a category” as defined by my condition above.
It appears that I need to make some sort of modification to the “site.js” file. I’ve looked it over, but as I mentioned, I have a very limited understanding of it at this point. Any assistance you could offer would be much appreciated!

http://toddish.co.uk Todd Francis
Hi,
Yeah, you need to edit the site.js, something like this should suffice:
data : {
‘title’ : $(‘#title’).val(),
‘category’ : $(‘#category’).val()
},
I hope that helps!

Abu Bakr
Hi
I tried to update site.js file to increase number of POST fields.
For example : i need to pass ‘submit’ parameter with title. so I modify it as
data : {
‘title’ : $(‘#title’).val(),
‘submit’ : ‘submit’
},
but when run the script, an javascript error displayed for me
ERROR Object { url=”http://localhost/disht/…php/upload/upload_file/”, isLocal=false, global=true, more…} Object { responseXML=document, responseText=”"} error
SyntaxError: syntax error
help me please to pass many parameters with title
thsnks
http://engramweb.com Dejan
Nice tut, but I rather use this jQuery widget which allows multiple file upload and other useful settings
https://github.com/blueimp/jQuery-File-Upload
Demo:
http://aquantum-demo.appspot.com/file-upload

John
I’d like to use that but I’ve had nothing but trouble trying to get it to work :

Larry
Thanks so much for this tutorial it was awesome! This is a really simple question but everything is working great but for some reason my success function is never triggered, the file is uploaded just great, do you know what could be causing this?
Thanks!
Larry

Larry
never mind figured it out! :)

Abu Bakr
Hi
I have a problem here .. it does not response anything
to evaluate it .. this is a link to my project (http://ciarabia.com/t.zip) and you need to enter (http://localhost/t/index.php/upload/index) to test it
thanks
http://cards-sw.host-ware.com/ Omar
Hi
What about enabling the code to handle more than one upload input field ?!!
I need my user to upload his picture and his PDF CV file in the same form.
thanks
http://www.gnuteam.blogspot.com McCubo
Thanks for posting this great tutorial!!.
at first it gave me some error, but when i re-read it, i solved it … some distractions … but was my fault xD.
Cheers and see you in another CI post :D
Ben
I keep getting errors “ajaxfileupload.js:116Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘handleError’”
I appears jquery remove the function handleError that is used in the ajaxfileupload.js file. Any work around for this?

Ben
Nevermind, I just extened jQuery with my own handleError function. worked.

blk
how do you coded your own handleError function?

Chirag
nice article….good for beginner
rose
Hi,
Thanks for your code. I am experiencing difficulty when trying to upload files from different browsers in different system. The file is not getting uploaded when I try from firefox 10.0.1 in one system but works fine in chrome and IE. When I tried in same chrome version from two different systems, in one it worked and in other it did not. Will you be able to figure out what exactly the issue is?
ashique mahamud
would you like to send me the ajaxfileupload.js the library file to this email.
it gets an error here: $.ajaxFileUpload is not a function.
thank you
Kevin
Great Tut. Everything works great now.
I’m looking for some small help on a slight improvement to it.
When the Submit button is clicked and the file is successfully uploaded – I would like to blank out the userfile form rather than show the old file URL there.
I’m very new at playing around with Jquery – so any help is greatly appreciated!

Kevin
Scratch the above post. After fighting with this damn thing for a week now, it turns out that you can use a simple JQery line to amend any html within a DIV.
$(‘#userfile’).html(‘ File: <input type=”file” name=”userfile” id=”userfile” size=”60″ value=”" />’);
The .html tag overwrites the HTML in the code…. now that I understand that – the possibilities for using JQuery just opened up to me!

Tolegen
When I’ve entered http://localhost/CodeIgniter/index.php/Upload/index , browser showed me 404 Page Not Found. How can I fix this problem?

How to Upload Files with CodeIgniter and AJAX

Tutorial Details

Preface

Step 1 - Creating the Form

Set up the Controller

Create the Form

Some Simple CSS

Step 2 - The Javascript

Step 3 - Uploading the File

The Controller

The Model

Files Folder

Step 4 - The File List

The JavaScript

The Controller

The Model

The View

Deleting the File

The JavaScript

The Controller

The Model

Final Thoughts

Enjoyed this Post?

By Todd Francis

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

How to Upload Files with CodeIgniter and AJAX

Tutorial Details

Preface

Step 1 - Creating the Form

Set up the Controller

Create the Form

Some Simple CSS

Step 2 - The Javascript

Step 3 - Uploading the File

The Controller

The Model

Files Folder

Step 4 - The File List

The JavaScript

The Controller

The Model

The View

Deleting the File

The JavaScript

The Controller

The Model

Final Thoughts

Enjoyed this Post?

By Todd Francis

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Follow Nettuts+ and Tuts+ on Twitter