<form enctype="multipart/form-data" action="upload.php" method="POST"> <input name="uploaded" type="file" /> <input type="submit" value="Upload" /> </form> <?php if(isset($_REQUEST['submit'])){ $target = "data/".basename( $_FILES['uploaded']['name']) ; move_uploaded_file($_FILES['uploaded']['tmp_name'], $target); } ?> Я знаю Javascript, AJAX и JQuery и т. Д., И я считаю, что индикатор выполнения загрузки может быть создан с использованием PHP, AJAX и Javascript и т. Д.
Я удивлен, как получить размер загрузки (что означает каждую секунду, которую я хочу знать, сколько загружается файл и сколько осталось, я думаю, что это должно быть возможно с использованием файла AJAX и т. Д.) Во время загрузки.
Вот ссылка на руководство PHP, но я не понял этого: http://php.net/manual/en/session.upload-progress.php
Есть ли какой-либо другой способ показать индикатор выполнения загрузки с помощью PHP и AJAX, но без использования какого-либо внешнего расширения PHP? У меня нет доступа к php.ini
PHP Doc очень подробный, он говорит
Прогресс загрузки будет доступен в супергелбале $ _SESSION, когда выполняется загрузка, и когда для POST для переменной с тем же именем, что и для параметра INI session.upload_progress.name, установлено значение. Когда PHP обнаруживает такие POST-запросы, он заполняет массив в $ _SESSION, где индекс представляет собой конкатенированное значение параметров session.upload_progress.prefix и session.upload_progress.name INI. Обычно ключ извлекается, читая эти настройки INI, т.е.
Вся требуемая информация полностью готова к именованию сеанса PHP
Все, что вам нужно – извлечь эту информацию и отобразить ее в своей 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>
session_start(); header('Content-type: application/json'); echo json_encode($_SESSION["upload_progress_upload"]);
Вот лучшая оптимизированная версия из PHP Session Upload Progress
$('#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's 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')); });
$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);
Это мой код, который он отлично работает. Попробуйте:
Демо-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><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!"; } ?>
Могу я предложить вам FileDrop .
Я использовал его, чтобы создать прогессивный бар, и это довольно легко.
Единственный недостаток, с которым я познакомился, – это некоторые проблемы, связанные с большими объемами данных, потому что они, похоже, не очищают старые файлы, могут быть исправлены вручную.
Не написано как JQuery, но все равно приятно, и автор отвечает на вопросы довольно быстро.
Хотя может быть очень интересно написать код для индикатора выполнения, почему бы не выбрать существующую реализацию. Эндрю Валумс написал отличный, и вы можете найти его здесь:
Я использую его во всех своих проектах, и это работает как шарм.
Прежде всего, убедитесь, что на вашем компьютере установлен PHP 5.4. Вы не отметили php-5.4, поэтому я не знаю. Проверьте, вызвав echo phpversion(); (или php -v из командной строки).
В любом случае, если у вас есть правильная версия, вы должны иметь возможность установить правильные значения в файле php.ini . Поскольку вы говорите, что не можете этого сделать, мне не стоит начинать объяснение о том, как это сделать.
В качестве резервного решения используйте загрузчик Flash-объектов.
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 } }