PHP Ajax 上传进度条
Posted
技术标签:
【中文标题】PHP Ajax 上传进度条【英文标题】：PHP Ajax Upload Progress Bar 【发布时间】：2012-04-10 07:30:29 【问题描述】：<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 等创建上传进度条。
我很惊讶如何在正在上传。
这是 PHP 手册的链接，但我不明白： http://php.net/manual/en/session.upload-progress.php
有没有其他方法可以使用 PHP 和 AJAX 显示上传进度条，但不使用 PHP 的任何外部扩展？我无权访问php.ini
【问题讨论】：
【参考方案1】：这是我的代码，它工作正常试试看：
演示网址 （断开的链接）
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!";
?>
【讨论】：
uploadProgress 不是 ajax 选项，但您可以改用它：***.com/questions/42216409/…【参考方案2】：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
【讨论】：
【参考方案3】：我可以建议你FileDrop。
我用它来制作进度条，很简单。
我遇到的唯一缺点是处理大量数据时会出现一些问题，因为它似乎无法清除旧文件——可以手动修复。
不是JQuery写的，不过还是挺好看的，作者回答问题也很快。
【讨论】：
【参考方案4】：虽然为进度条编写代码可能很有趣，但为什么不选择现有的实现。 Andrew Valums 写了一篇很棒的文章，你可以在这里找到它：
http://fineuploader.com/
我在所有项目中都使用它，它就像一个魅力。
【讨论】：
我也将它用于某些项目。像魅力一样工作。 我知道这个答案是旧的，所以请原谅我，但你不必支付fineuploader吗？ 源代码在 GNU GPL v3 许可下可用：github.com/Widen/fine-uploader【参考方案5】：简介
PHP 文档说得很详细
在上传过程中，以及在 POST 与 session.upload_progress.name INI 设置设置为同名的变量时，上传进度将在 $_SESSION 超全局中可用。当 PHP 检测到此类 POST 请求时，它将在 $_SESSION 中填充一个数组，其中索引是 session.upload_progress.prefix 和 session.upload_progress.name INI 选项的连接值。通常通过读取这些 INI 设置来检索密钥，即
您需要的所有信息都已在 PHP 会话命名中准备就绪
开始时间 内容长度 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 Session Upload Progress的更好的优化版本
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'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);
其他例子
Tracking Upload Progress with PHP and JavaScript PHP-5.4-Upload-Progress-Example【讨论】：
对我不起作用。此外，链接已过时【参考方案6】：首先，确保您的机器上安装了 PHP 5.4。你没有标记php-5.4 所以我不知道。通过调用echo phpversion();（或从命令行调用php -v）进行检查。
无论如何，假设您拥有正确的版本，您必须能够在php.ini 文件中设置正确的值。既然你说你不能这样做，我就不值得我解释如何去做。
作为备用解决方案，请使用 Flash 对象上传器。
【讨论】：
我知道如何对 php.ini 进行更改，但问题是我无法访问 php.ini，我不想使用 Flash，甚至无法将 php 升级到最新版本版本。 如果您没有合适的 PHP 版本，请不要费心去尝试让它工作。不会的，故事结束。此功能仅在最新的 PHP 版本中添加。 我认为在 php 5.4 之前，除了 session.upload-progress 还有其他方法吗？很多网站都包含进度条 这些网站使用其他方法，通常基于 Flash。一些较新的浏览器支持一些关于文件的东西，但我不太了解。以上是关于PHP Ajax 上传进度条的主要内容，如果未能解决你的问题，请参考以下文章