上传进度条 - 浏览器兼容性问题

时间:2013-03-13 19:33:00

标签: jquery jquery-ui file-upload cross-browser progress-bar

遇到与浏览器兼容性相关的一些问题。我正在使用UltraMega Tech的上传进度条形码,如下所示。该代码生成一个状态栏,用于跟踪用户提交的文件的进度。它适用于IE9和Firefox,但Chrome不是这种情况。使用Chrome时,表单会消失并显示上传栏,但栏不会移动以跟踪文件上传。但是,该文件仍然上传。有什么想法吗?

<style>
  #progress-bar, #upload-frame {display: none;}
</style>

<script>
        (function ($) {
            // We'll use this to cache the progress bar node
            var pbar;

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

            $(function () {

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

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

                    // Cache the progress bar
                    pbar = $('#progress-bar');

                    // Show the progress bar, initialize the jQuery UI plugin
                    pbar.show().progressbar();

                    // We know the upload is complete when the frame loads
                    $('#upload-frame').load(function () {

                        // This is to prevent infinite loop in case the upload is too fast
                        started = true;

                    });

                    // Start updating progress after a 1 second delay
                    setTimeout(function () {

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

                    }, 1000);

                });

            });

            function updateProgress(id) {

                var time = new Date().getTime();

                // Make a GET request to the server, Pass our upload identifier as a parameter
                $.get('http://example.com/getprogress.php', { uid: id, t: time }, function (data) {

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

                    if (progress < 100 || !started) {

                        // Determine if upload has started
                        started = progress < 100;

                        // If we aren't done or started, update again
                        updateProgress(id);

                    }
                    else if(progress == 100)
                    {
                        $('#Patience_message').show();
                    }

                    // Update the progress bar percentage, but only if we have started
                    started && pbar.progressbar('value', progress);

                });

            }

        }(jQuery));

getprogress.php

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

}
}

0 个答案:

没有答案