jQuery没有ajax进度条文件上传器

Question

我正在编写一个文件上传网络应用程序。它目前是一个带有 php 条件的 3 步表单。

我的上传器正在工作。但我想知道是否有一种方法可以在没有 AJAX 用户的情况下创建进度条。我有一个与 jQuery 和 ajax 完美配合的进度条，但是在文件上传完成后，表单没有提交并转到确认页面并回显结果和变量等。

真的没有简单的方法可以在不需要 ajax 的情况下使用 php 和 jquery/javascript 跟踪文件上传百分比吗？疯狂地试图解决这个问题。

Answer 1

使用这个jquery进度条码上传文件

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