Show File Upload Progress Bar without click Submit Button

Question

I am trying to code a file uploading process. When i will click browse button, the file will be uploaded on server and display that file contents without clicking submit button. When i upload file of large size, the upload will take more time, so i needed to implement a progressbar.

I have referred to the following useful links:

http://malsup.com/jquery/form/progress.html

http://malsup.com/jquery/form/#file-upload

I want the progress bar to be displayed automatically when i will click browse button. I don't know how to call the progress bar function, when i select the file in the browse window, without clicking submit Button.

I used the following code.

File : index.php

        <!doctype html>
        <head>
        <title>File Upload Progress Demo #1</title>
        <style>
        body { padding: 30px }
        form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

        .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
        .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
        .percent { position:absolute; display:inline-block; top:3px; left:48%; }
        </style>
        </head>
        <body>

                <form action="upload.php" method="post" enctype="multipart/form-data" id="hello">
                <input type="file" name="uploadedfile" ><br>
                <input type="submit" value="Upload File to Server" >


            </form>

            <div class="progress">
                <div class="bar"></div >
                <div class="percent">0%</div >
            </div>

            <div id="status"></div>

        <script src="jquery.js"></script>
        <script src="jquery.form.js"></script>
        <script>
        (function() {

        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');

        $('#hello').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);

            },
            complete: function(xhr) {
             bar.width("100%");
            percent.html("100%");
                status.html(xhr.responseText);
            }
        }); 

        })();       
        </script>

        </body>
        </html>

File : upload.php

        <?php
        $target_path = "upload/";

        $target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

        if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
            echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
            " has been uploaded";
        } else{
            echo "There was an error uploading the file, please try again!";
        }
        ?>

mkdevoogd mkdevoogd · Accepted Answer · 2013-04-19T11:30:33

The jQuery plugin you are using does not seem to support the behavior you want. That leaves you with two options:

Hack the plugin, making the upload start immediatly after selecting the file.
User an alternative for the upload which gives you more control over the upload control, for example http://www.plupload.com/.

Show File Upload Progress Bar without click Submit Button

1 Answers