Upload files using Ajax with Progress Bar

Uploading files using some server side languages are not a big deal. But, if we handle file uploads asynchronously, then we will be able to save time as well as some sudden overload to the server. Here is a very short working demo of code that uploads the file through Ajax. Actually, the file is uploaded via the server side code (here PHP), but the user don't have to step upto the next page and it feels like it is happening in client side.

1. Create an HTML file say, form.html and put the following code.

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    </head>
    <body>
    <div class="container">
    <h3 class="page-header">File Upload via Ajax with Progress Bar</h3>
    <div>
    <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br/>
    <input type="submit" value="Upload File to Server" class="btn btn-primary">
    </form>
    </div>
    <br/>
    <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
    </div>
    <div class="percent">0%</div >
    </div>
    <p class="alert-info" id="status"></p>
    </div>

    <script>
    (function() {
    var bar = $('.progress-bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
    beforeSend: function() {
    status.empty();
    var percentVal = '0%';
    bar.width(percentVal);
    percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    bar.width(percentVal);
    percent.html(percentVal);
    },
    success: function() {
    var percentVal = '100%';
    bar.width(percentVal);
    percent.html(percentVal);
    },
    complete: function(xhr) {
    status.html(xhr.responseText);
    status.addClass('alert');
    }
    });

    })();
    </script>
    </body>
    </html>

2. Now, handle the file upload into another file, upload.php as follows.

<?php
    $uploaddir = 'E:/WebArtisans/';  //Path to a directory on your file system
    $uploadfile = $uploaddir . basename($_FILES['myfile']['name']);

    if (move_uploaded_file($_FILES['myfile']['tmp_name'], $uploadfile)) {
        echo "File is successfully uploaded.";
    } else {
        echo "Upload failed.";
    }
?>

You can download the complete project from GitHub. Click here.

Now, run and see. :)

Upload files using Ajax with Progress Bar

1 comment: