In this asp .net tutorial we will learn about
How to use Blueimp jquery file upload in asp .net to upload multiple files with progress bars . Blueimp jquery file upload has multiple features like:
- Multiple file selection.
- Progress bars.
- Drag and drop support.
- Chunked file upload support.
- Resumable file uploads.
- Client size image resizing.
- Many more...
Blueimp jquery file upload has created by
Sebastian Tschan. Thanky you very much for such a great plugin.
1. Download blueimp jquery file upload
To begin with creating
Blueimp jquery file upload in asp .net you need to download required files. Blueimp Jquery file upload plugin is open source and you can download all the files from
Here.
2. Copy required files.
After downloading required files now its time to copy required files into your asp .net application. We will ignore extra files comes within.
3. Download File upload handler.
To upload files using
Blueimp jquery file upload in asp .net we need file upload handler which works with asp .net.
There is a list of available file upload handlers mentioned on the
github wiki page. You can use any handler of your choice.
I will use file handler written by
Sergiy Dobychyn which is also open source and available at Github. You can download required handler from
Here.
4. Copy File upload handler to applicaiton.
After downloading the prefered upload handler it is time to place it into our applicaiton. Locate "asp_net" folder within the downloaded files and paste it inside "server" folder.
5. Update settings.
1. Change file upload handler.
Find "main.js" file inside "js" folder and update following line of code:
url: 'server/php/'
//---- Change above line with this line:
url: 'server/asp_net/UploadHandler_4_0.aspx'
2. Change location of uploaded files
Find "UploadHandler_4_0.aspx" inside "server/asp_net" folder and change following line of code:
private static readonly string FILES_PATH = @"/files";
//---- Change above line with this line:
private static readonly string FILES_PATH = "~/";
Here I have changed configuration to save files into root directory of application you can also use any other folder of your choice.
6. Integrate Blueimp jquery file upload in asp .net website.
We have placed all the required files and now its time to integrate file upload functionlaity into our application page. Create a new page and add following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
<form id="fileupload" action="server/asp_net/UploadHandler_4_0.aspx" method="POST" enctype="multipart/form-data">
</form>
Blueimp jquery file upload in asp .net demo:
