在iPhone上使用Mobile Safari进行EXCEPT

时间:2014-02-25 10:53:21

标签: javascript php progress-bar mobile-safari

我安装了PECL模块。一切正常。进度条正在完成它的工作。它适用于Android浏览器上的所有桌面浏览器,但在Safari / iPhone(iOS 7.0.6 iPhone5和旧版iPhone4)上没有显示进度。这些文件确实上传了,但你只会看到(一段时间后)100%的短暂时间,而不是脚本显示“上传完成”。希望有人可以帮助我。

        <?php
    if ($_POST['progress'] == "show") { 
    if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
        $path = $_SERVER['DOCUMENT_ROOT'].'/upload/files/' . basename($_FILES['file']['name']);
        move_uploaded_file($_FILES['file']['tmp_name'], $path);
    }
    exit; }

    if ($_GET['getprogress'] == "1") { 
    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;
        }
    }
    exit; }

    // Generate random string for our upload identifier
    $uid = md5(uniqid(mt_rand()));
    ?>
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
            <title>Upload Something</title>
            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/start/jquery-ui.css" rel="stylesheet" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
            <style>
                #progress-bar, #upload-frame, #upload-result {
                    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
                        $('#upload-form').submit(function() {

                            // Hide the form
                            $('#upload-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;

                                // Do whatever you want when upload is complete
                                 $('#progress-bar').hide();
                                 $("#progress-result").html('upload complete');

                            });

                            // 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
                        // Also pass current time to prevent caching
                        $.get('/upload/index.php?getprogress=1', { 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);

                            }

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

                        });

                    }

                }(jQuery));
            </script>
        </head>
        <body>
            <form method="post" action="" enctype="multipart/form-data" id="upload-form" target="upload-frame">
                <input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
                <input type="hidden" id="progress" name="progress" value="show">
                <input type="file" name="file">
                <br><input type="submit" name="submit" value="Upload!">
            </form>
            <div id="progress-bar"></div>
            <div id="progress-result"></div>
            <iframe id="upload-frame" name="upload-frame"></iframe>
        </body>
    </html>

0 个答案:

没有答案