Question

表单提交后，将显示进度条，并调用getProgress函数。 getProgress检查一个php文件（使用uploadprogress apache mod获取当前上传进度）并返回一个0到100之间的数字（表示完成）。

好的，想法是如果返回的数字不是100，则getProgress是自行执行的。否则，表单将继续upload.php文件被操作。

这就是我想要的：http://screenr.com/ByG＆lt; - video。

这是HTML部分。

<form method="post" action="upload.php" enctype="multipart/form-data" id="UploadForm">
    <input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
    <input type="file" name="file">
    <input type="submit" name="submit" value="Upload!">
</form>
<div id="UploadBarContainer">
        <div id="LoadBar"></div>
        <div id="ProgressBar"></div>
    </div>

这是jQuery部分。 似乎已被打破

$(function(){

    // This flag determines if the upload has started
    var started = false;

    // Start progress tracking when the form is submitted
    $('#UploadForm').submit(function() {

        //Update the flag to true.
        started = true;

        //Hide the form.
        $('#UploadForm').hide();

        //Show the progress bar.
        $('#UploadBarContainer, #LoadBar, #ProgressBar').show();

        //Start updating progress after a 2 second delay.
        //This is to prevent the getprogress.php assume that upload is complete. 
        setTimeout(function () {

            // We pass the upload identifier to our function
            getProgress($('#uid').val());

        }, 2000);

    });


    //Function used to get the current upload progress.
    //It should be executed over and over again untill the result is 100.
    function getProgress(id) {

        //Get the current time.
        var time = new Date().getTime();

        //Make an ajax request to the server.
        $.ajax({

            //Pass the data trought GET method.
            type: 'GET',

            //Get the progress from this php file.
            url: 'getprogress.php',                         

            //Pass our upload identifier as a parameter and current time to prevent caching.
            data: { uid: id, t: time }, 

            //Get the results.
            success: function (data) {

                //Get the output as an integer.
                var progress = parseInt(data, 10);

                //If upload progress is not 100, change bar percentage and update again.
                if (progress < 100) {

                    //Update the progress bar percentage.
                    //But only if we have started.
                    $('#ProgressBar').css('width', progress + '%');

                    //If we aren't done, update again.
                    getProgress(id);

                }
            }

        });

    }

});

就我说这有帮助，这是在$ .ajax请求上调用的getprogress.php文件。

if (isset($_GET['uid'])) {
    // Fetch the upload progress data
    $status = uploadprogress_get_info($_GET['uid']);
    if ($status) {
        // Calculate the current percentage
        echo round($status['bytes_uploaded']/$status['bytes_total']*100);
    }
    else {
        // If there is no data, assume it's done
        echo 100;
    }
}

感谢任何帮助，我有一个现场演示，但我害怕你可以上传的内容。

Answer 1

只有某些浏览器的新版本支持文件上传进度。如果getprogress.php发送数字或只是错误，你应该用firebug检查你的网。你可以看看这些： HTTP：

Server-side, get progress on sending file
可以使用swf swfupload
另一个jquery插件：uploadify

Answer 2

最后我得出的结论是，不可能在webkit浏览器上工作，例如opera，chrome和safari，而不是firefox和Internet Explorer。

Webkit浏览器在上传文件时往往会阻止任何ajax。

您可能需要查看此内容：https://bugs.webkit.org/show_bug.cgi?id=23933

我无法通过表单提交上的$ .ajax更新进度条

2 个答案: