Javascript进度仅在第二个表单提交后有效

Question

I have a script for file and image uploads, and when you submit the file, there's javascript that shows a percentage of how much it's done, but this only works on the second time you submit it. Ex. If you upload one picture, then upload one right after it only works the second time. This is the JS:

<script>
    $(function() {

    var bar = $('.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);
        }
    });
    }); 
</script>

And the Form:

<div class="bar"></div>
<div class="percent">0%</div>
<div id="status"></div>
<form enctype="multipart/form-data" method="post" action="/uploadphoto">
<fieldset>
<legend>Picture Upload</legend>
<label for="name">Picture Name:</label><br />
<input type="text" id="name" name="name" value="" /><br />';
echo'<select id="cat" name="cat">';
$query = "SELECT * FROM gallery_cat";
$data = mysqli_query($dbc, $query);
while ($row = mysqli_fetch_array($data)) {
    echo '<option value="'.$row['cg_id'].'">'.$row['cg_name'].'</option>';
}
echo'</select><br /><br />';    
echo'
<label for="desc">Description</label><br />
<textarea id="desc" name="desc" rows="4" cols="30"></textarea><br />
<label for="file">Picture:</label>';
echo'<input type="file" id="file" name="file" />
</fieldset>
<input type="submit" value="Save Picture" name="submit" /> <a class="button" href="/viewgallery">Cancel</a>

Please keep in mind that I'm new to JS. The PHP in the form is to select which gallery to upload to, and it shouldn't affect the JS.

Answer 1

 Initialize the form when dom is ready.Try this one,
 $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('form').ajaxForm(function() { 
            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);
    } 
        }); 
  });