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


Top 5 Contributors of the Month
sivanagamahesh

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>
<html>
<head>
    <title>Page Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
</head>

<body>
    <h2>Index</h2>

    <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>
     
</body>

</html>


jQuery Script

        <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...');
                        return;
                    }
                    var formData = new FormData();
                    $.each(files, function (i, file) {
                        formData.append('file-' + i, file);
                    });

                    $progress.show();

                    $.ajax({
                        url: "CheckUpload.php",
                        type: "POST",
                        data: formData,
                        cache:false,
                        processData: false, //Work around #1
                        contentType: false, //Work around #2
                        success: function (res) {
                            $progress.hide();
                            $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');
                        $progress.val(percentComplete);
                    }
                }
            });
        </script>


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:

Responses

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