Mini jquery file upload form in asp net

In this tutorial we will learn about how to use Mini AJAX File Upload Form in asp .net to upload multiple files with progress bars. Mini AJAX File Upload Form provides users a choice to drag/drop files or they can browse files to the uploader. Mini AJAX File Upload Form in asp .net also displays cool progress bars during file upload.

1. Download Mini AJAX File Upload Form

To get started with the Mini AJAX file upload form in asp .net you need to download the required files. You can download required files from here. After downloading the files copy assets folder and place it into your website.

2. Add refrence to CSS and Jquery Files.

Add these refrences just above the closing body tag.

<!-- JavaScript Includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/jquery.knob.js"></script>
 
<!-- jQuery File Upload Dependencies -->
<script src="assets/js/jquery.ui.widget.js"></script>
<script src="assets/js/jquery.iframe-transport.js"></script>
<script src="assets/js/jquery.fileupload.js"></script>
 
<!-- Our main JS file -->
<script src="assets/js/script.js"></script>
 
<!-- Google web fonts -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">
 
<!-- The main CSS file -->
<link href="assets/css/style.css" rel="stylesheet">

3. Design File upload control.

Make sure you do not change id of the from tag.

<form id="upload" method="post" action="Default.aspx" enctype="multipart/form-data">
    <div id="drop">
        Drop Here
        <a>Browse</a>
        <input type="file" name="upl" multiple="multiple">
    </div>
 
    <ul>
        <!-- The file uploads will be shown here -->
    </ul>
</form>   

4. Increase max file upload size in web.config file.

<system.web>
<httpruntime maxrequestlength="40096"></httpruntime>
</system.web>

5. Add required namespaces.

Add following namespace.

using System.IO;

6. Code behind to upload files to folder.

Add following code in your .cs page.

   protected void Page_Load(object sender, EventArgs e)
{
    foreach (string s in Request.Files)
    {
        HttpPostedFile file = Request.Files[s];
        int fileSizeInBytes = file.ContentLength;
        string fileName = file.FileName;
        string fileExtension = "";
 
        if (!string.IsNullOrEmpty(fileName))
            fileExtension = Path.GetExtension(fileName);
 
         
        string savedFileName = Guid.NewGuid().ToString() + fileExtension;
        string filename = Server.MapPath("~/") + savedFileName;
 
        // Place your code here to save information in database.
 
        // Save the stream to disk
        file.SaveAs(filename);
    }
}
 
public string path { get; set; }

Related recommended articles:
1. AjaxFileUpload example to upload multiple files in asp .net
2. Multiple image upload with thumbnails example in asp .net

Special thanks to Martin Angelov for such a cool script.

7. Demo Mini AJAX File Upload Form in asp .net

mini jquery file upload form in asp net