.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh

Home >> Code Snippets >> Ajax >> Post New Resource Bookmark and Share   

 Subscribe to Code Snippets

HTML jQuery Ajax Upload Progress

Posted By:Sasi Prabhu       Posted Date: April 15, 2015    Points: 40    Category: Ajax    URL: http://www.dotnetspark.com  

HTML5 based file upload with progress and percentage using JQuery

HTML Content

<!DOCTYPE html>
    <title>Page Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">


    <input type="file" id="fileupload" />
    <br />
    <label id="result"></label><br />
    <button id="btnUpload" type="button">Upload</button>
    <progress id="progressbar" value="0" max="100"></progress>


jQuery Script

            $(function () {
                var $progress = $("#progressbar").hide();
                var $result=$('#result');
                $("#btnUpload").click(function () {
                    var files = $("#fileupload")[0].files;
                    if (files.length <= 0) {
                        $result.text('No files Choosen...');
                    var formData = new FormData();
                    $.each(files, function (i, file) {
                        formData.append('file-' + i, file);


                        url: "CheckUpload.php",
                        type: "POST",
                        data: formData,
                        processData: false, //Work around #1
                        contentType: false, //Work around #2
                        success: function (res) {
                            $result.text('file Save as : "'+res+'"');
                        error: function () { alert("Failed"); },
                        //Work around #3
                        xhr: function () {
                            myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) {
                                myXhr.upload.addEventListener('progress', showProgress, false);
                            } else {
                                console.log("Uploadress is not supported.");
                            return myXhr;


                function showProgress(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = (evt.loaded / evt.total) * 100;
                        $result.text(evt.loaded+'KB /'+evt.total+'KB');

jQuery ajax is Used to post the file into Server.

$.ajax - Important Properties (processDatacontentType, xhr)

showProgress - Used to Update upload progress status.

Happy Coding...


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More code samples in C#, ASP.Net, Vb.Net and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend