Панель выполнения загрузки Ajax для PHP

Ответ 1

Введение

PHP Doc очень подробно описывает

Прогресс загрузки будет доступен в супергелбале $_SESSION, когда выполняется загрузка, и когда для POST для переменной с тем же именем, что и для параметра INI session.upload_progress.name, установлено значение. Когда PHP обнаруживает такие POST-запросы, он заполняет массив в $_SESSION, где индекс представляет собой конкатенированное значение параметров session.upload_progress.prefix и session.upload_progress.name INI. Ключ обычно извлекается путем считывания этих настроек INI, то есть

Вся необходимая информация полностью готова к именованию сеанса PHP

• start_time
• content_length
• bytes_processed
• Информация о файлах (поддерживается несколько)

Все, что вам нужно, это извлечь эту информацию и отобразить ее в вашей HTML-форме.

Основной пример

a.html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
    var intval = null;
    var percentage = 0 ;
    function startMonitor() {
        $.getJSON('b.php',
        function (data) {
            if (data) {
                percentage = Math.round((data.bytes_processed / data.content_length) * 100);
                $("#progressbar").progressbar({value: percentage});
                $('#progress-txt').html('Uploading ' + percentage + '%');

            }
            if(!data || percentage == 100){
                $('#progress-txt').html('Complete');
                stopInterval();
            }
        });
    }

    function startInterval() {
        if (intval == null) {
            intval = window.setInterval(function () {startMonitor()}, 200)
        } else {
            stopInterval()
        }
    }

    function stopInterval() {
        if (intval != null) {
            window.clearInterval(intval)
            intval = null;
            $("#progressbar").hide();
            $('#progress-txt').html('Complete');
        }
    }

    startInterval();
</script>

b.php

session_start();
header('Content-type: application/json');
echo json_encode($_SESSION["upload_progress_upload"]);

Пример выполнения загрузки сеанса PHP

Вот лучшая оптимизированная версия Выполнение загрузки сеанса PHP

JavaScript

$('#fileupload').bind('fileuploadsend', function (e, data) {
    // This feature is only useful for browsers which rely on the iframe transport:
    if (data.dataType.substr(0, 6) === 'iframe') {
        // Set PHP session.upload_progress.name value:
        var progressObj = {
            name: 'PHP_SESSION_UPLOAD_PROGRESS',
            value: (new Date()).getTime()  // pseudo unique ID
        };
        data.formData.push(progressObj);
        // Start the progress polling:
        data.context.data('interval', setInterval(function () {
            $.get('progress.php', $.param([progressObj]), function (result) {
                // Trigger a fileupload progress event,
                // using the result as progress data:
                e = document.createEvent('Event');
                e.initEvent('progress', false, true);
                $.extend(e, result);
                $('#fileupload').data('fileupload')._onProgress(e, data);
            }, 'json');
        }, 1000)); // poll every second
    }
}).bind('fileuploadalways', function (e, data) {
    clearInterval(data.context.data('interval'));
});

progress.php

$s = $_SESSION['upload_progress_'.intval($_GET['PHP_SESSION_UPLOAD_PROGRESS'])];
$progress = array(
        'lengthComputable' => true,
        'loaded' => $s['bytes_processed'],
        'total' => $s['content_length']
);
echo json_encode($progress);

Другие примеры

• Отслеживание загрузки с помощью PHP и JavaScript
• PHP-5.4-Upload-Progress-Example

Ответ 2

Это мой код, работающий нормально. Попробуйте:

Демо-URL

http://codesolution.in/dev/jQuery/file_upload_with_progressbar/

Попробуйте этот код ниже: -

это мой html-код

<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
    <h1>File Upload Progress Demo #1</h1>
    <code>&lt;input type="file" name="myfile"></code>
        <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="uploadedfile"><br>
        <input type="submit" value="Upload File to Server">
    </form>

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
     bar.width("100%");
    percent.html("100%");
        status.html(xhr.responseText);
    }
}); 

})();       
</script>

</body>
</html>

Мой файл файла upload.php

<?php
$target_path = "uploads/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
}
?>

Ответ 3

Могу ли я предложить вам FileDrop.

Я использовал его, чтобы создать прогессию, и это довольно легко.

Единственный недостаток, с которым я столкнулся, - это некоторые проблемы, связанные с большими объемами данных, потому что он, кажется, не очищает старые файлы, может быть исправлен вручную.

Не написан как JQuery, но это все равно хорошо, и автор отвечает на вопросы довольно быстро.

Ответ 4

Хотя может быть очень интересно написать код для индикатора выполнения, почему бы не выбрать существующую реализацию. Andrew Valums написал отличный, и вы можете найти его здесь:

http://fineuploader.com/

Я использую его во всех моих проектах и ​​работает как шарм.

Ответ 5

Прежде всего, убедитесь, что на вашем компьютере установлен PHP 5.4. Вы не отметили php-5.4, поэтому я не Не знаю. Проверьте, вызвав echo phpversion(); (или php -v из командной строки).

В любом случае, если у вас есть правильная версия, вы должны иметь возможность установить правильные значения в файле php.ini. Поскольку вы говорите, что не можете этого сделать, мне не стоит начинать объяснение о том, как это сделать.

В качестве резервного решения используйте загрузчик Flash-объектов.

Ответ 6

XMLHTTPREQUSET2

var xhr = new XMLHttpRequest();
xhr.open('GET', 'video.avi', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
/*
    var img = document.createElement('img');
    img.onload = function(e) {
      window.URL.revokeObjectURL(img.src); // Clean up after yourself.
    };
    img.src = window.URL.createObjectURL(blob);
    document.body.appendChild(img);
    /*...*/
  }
};
xhr.addEventListener("progress", updateProgress, false);
xhr.send();



function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    console.log(percentComplete)
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}