Question

我试图将使用纯JavaScript的this example转换为等效的JQuery。

问题是每当我点击上传按钮时，它会在setTimeout功能（1秒）的持续时间内切换进度条，然后它会消失并显示＆＃34;完成＆＃34;从未向我展示任何实际进展。

我正在使用PHP＆gt; 5.4。我有session.upload_progress.enabled = On。我上传了一个巨大的文件，我知道它应该需要几秒钟才能在本地完成。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<style>
#progress_bar {
  border: solid 1px #000;
  height: 20px;
  width: 300px;
  display: none;
}
#bar_color {
  background-color: #006666;
  height: 20px;
  width: 0px;
}
</style>
<title>File Upload Progress Bar</title>
</head>
<body>

<div id="progress_bar">
  <div id="bar_color"></div>
</div>
<div id="upload_status"></div>

<form id="uploadForm" enctype="multipart/form-data">
<input type="hidden" name="<?php echo ini_get('session.upload_progress.name'); ?>" value="uploadForm" />
<input type="hidden" name="MAX_FILE_SIZE" value="9999999" />
<input type="file" name="file" /><br />
<input type="submit" value="Start Upload" />
</form>

</body>
</html>

JQuery的：

<script>
$(document).ready(function () {
    var interval;

    // update status bar
    $("#uploadForm").submit(function(e) {
        e.preventDefault();

        $('#progress_bar').toggle();
        interval = setInterval(function() {
            $.ajax({
                cache: false,
                url: "status.php",
                type: "GET"
            })
            .done(function(response) {
                if (response) {
                    $('#bar_color').width(response + '%');
                    $('#upload_status').html(response + '%');

                    if (response < 100) {
                        setInterval(interval, 1000);
                    } else {
                        $('#progress_bar').toggle();
                        $('#bar_color').width(0 + 'px');
                        $('#upload_status').html('Done.');
                        clearInterval(interval);
                    }
                }
            });
        }, 1000);
    });
});
</script>

PHP：

<?php
session_start();

$key = ini_get('session.upload_progress.prefix') . 'uploadForm';
if (!empty($_SESSION[$key])) {
    $current = $_SESSION[$key]['bytes_processed'];
    $total = $_SESSION[$key]['content_length'];
    echo $current < $total ? ceil($current / $total * 100) : 100;
} else {
    echo 100;
}

我哪里错了？

Answer 1

您必须使用ajax上传文件，并在上传时更新进度条，而不是在完成后更新。 http://jsfiddle.net/SwHf6/

$('input[type=file]').change(function() {
    var fd = new FormData();
    fd.append('file', $('input[type=file]').get(0).files[0]);

    $.ajax({
        url: '.',
        type: 'POST',
        processData: false,
        data: fd,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.addEventListener('progress', function(ev) {
                $('.bar').css('width', (ev.loaded/(ev.total/100))+'%');
            }, false);

            return xhr;
        },
        beforeStart: function() {
            $('.bar').css('width', '0%');
        },
        success: function() {
            alert('done');
        }
    });
});

会话上传使用JQuery进行

1 个答案: