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

Question

我有一个用于文件和图像上传的脚本，当您提交文件时，有 javascript 显示已完成的百分比，但这仅在您第二次提交时有效。前任。如果您上传一张图片，则在第二次有效后立即上传一张图片。这是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>

和表格:

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

请记住，我是 JS 新手。表单中的PHP是选择上传到哪个图库，应该不会影响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);
    } 
        }); 
  });