PHP的Ajax上传进度条 [英] PHP Ajax Upload Progress Bar
问题描述
<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);
}
?>
我知道javascipt的,AJAX和JQuery的等得很好,我相信上传进度条可以使用PHP,Ajax和JavaScript等
创建
我很惊讶怎么去上传的大小(平均每个第二,我想知道,有多少文件被上传,有多少是剩余的,我认为它应该使用AJAX等有可能)上传过程中文件是过程
I know Javascipt, AJAX and JQuery etc very well and i believe upload progress bar can be created using PHP, AJAX and Javascript etc.
I am surprised how to get the size of upload (Mean in each second i want to know, how much file is uploaded and how much is remaining, i think it should be possible using AJAX etc) file during upload is in process.
下面是链接PHP手册,但我不明白,
<一href="http://php.net/manual/en/session.upload-progress.php">http://php.net/manual/en/session.upload-progress.php
here is link to PHP manual but i didn't understand that
http://php.net/manual/en/session.upload-progress.php
任何其他方法来使用PHP和AJAX,但不使用PHP的任何外部扩展显示上传进度条。我没有访问为php.ini
Any other method to show upload progress bar using PHP and AJAX but without use of any external extension of PHP. I don't have access to php.ini
推荐答案
PHP的文档是非常详细,它说
Introduction
The PHP Doc is very detailed it says
上传进度将在$ _SESSION全局可当上载过程中,并张贴了同名的变量时,作为session.upload_progress.name INI设置为。当PHP检测到此类POST请求,将填充在$ _SESSION数组,其中,该指数的session.upload_progress。preFIX和session.upload_progress.name INI选项连接的值。关键是典型的检索阅读这些INI设置,即
The upload progress will be available in the $_SESSION superglobal when an upload is in progress, and when POSTing a variable of the same name as the session.upload_progress.name INI setting is set to. When PHP detects such POST requests, it will populate an array in the $_SESSION, where the index is a concatenated value of the session.upload_progress.prefix and session.upload_progress.name INI options. The key is typically retrieved by reading these INI settings, i.e.
所有你所需要的信息是所有准备在PHP会话命名
All the information you require is all ready in the PHP session naming
- START_TIME
- CONTENT_LENGTH
- bytes_processed
- 文件信息(支持多种)
所有你需要的是这些信息提取出来,并在你的HTML表单中显示出来。
All you need is to extract this information and display it in your HTML form.
<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会话上传进度更好的优化版本
Example with PHP Session Upload Progress
Here is a better optimized version from 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'));
});
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
- <一个href="https://github.com/chemicaloliver/PHP-5.4-Upload-Progress-Example">PHP-5.4-Upload-Progress-Example
- Tracking Upload Progress with PHP and JavaScript
- PHP-5.4-Upload-Progress-Example
Other Examples
这篇关于PHP的Ajax上传进度条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!