CODEWITHSUNDEEP
phpjqueryuploadprogress
EHerman
EHerman

Reputation: 1892

jQuery without ajax Progress bar file uploader

I am writing a file upload web app. It is currently a 3 step form with php conditional's.

I have the uploader working. But I am wondering if there is a way to create a progress bar WITHOUT the user of AJAX. I had a progress bar working perfectly with jQuery and ajax, but after the file upload completes, the form doesn't submit and move on to the confirmation page and echo out the results and variables etc.

Is there really no easy way to track file upload percentages with php and jquery/javascript with out the need for ajax?? Going crazy trying to figure out a work around for this.

Upvotes: 0

Views: 2725

Answers (1)

Shibu Thomas
Shibu Thomas

Reputation: 3196

Use this jquery progress bar code for uploading file

<script type="text/javascript" language="javascript" src="script/jquery-progress-form.js"></script>
    <script>
    $(document).ready(function()
            {
        $("#ajax_up").click(function(){
         var options = { 
                beforeSend: function() 
                {
                    $("#progress").show();
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                },
                uploadProgress: function(event, position, total, percentComplete) 
                {
                    $("#bar").width(percentComplete+'%');
                    $("#percent").html(percentComplete+'%');
                },
                success: function() 
                {
                    $("#bar").width('100%');
                    $("#percent").html('100%');
                },
                complete: function(response) 
                {
                $("#message").html("<font color='green'><div style='height:1000px;'>"+response.responseText+"</div></font>");
                },
                error: function()
                {
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
            }
            }; 
        $("#myForm").ajaxForm(options);

        });
            });
    </script>
    <style>
        #progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
        #bar { background-color: #B4F5B4; width:0%; height:10px; border-radius: 3px; padding-bottom:10px; }
        #percent { position:absolute;top:3px; left:48%; }
    </style>


    <h2 style="font-family:Arial, Helvetica, sans-serif;">Upload Image</h2>
         <form id="myForm" name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
         <input type="file" name="image" size="30" id="image" />
         <input type="submit" name="upload" value="Upload" class="buttoni2m_1" id="ajax_up" /><br />

        </form> <br />  
    <div id="progress">
            <div id="bar"></div>
            <div id="percent">0%</div >
    </div>
    <div id="message"></div><br />

Upvotes: 1

Related Questions