Showing posts from December, 2012

File upload without refreshing the page - Ajax File Upload

When we use file upload control in web pages, it required to post the page to get the file uploaded. Below I describe how to upload a file without refreshing the page with better looking upload control.

Supported Browseres : Chrome, IE (6,7,8,9), Firefox, Safari

Demo : Upload without page refresh
Ajax Uploader Script :uploader.js

Our control will look like

HTML Markup

This is our div control that will be converted to a upload control.
<div id="fileUploaderContainer" class="fileuploadcontainer"></div>

Need a button to upload selected files.
<input id="uploadbtn" type="button" value="upload" />

Page Load Script

We need to add following script to be called when page is loaded. So that it will wire up required events for the file upload and generate controls dynamically in side the given control ("fileUploaderContainer").

$(document).ready(function () {