我知道安装 uploadprogress 扩展没有问题，因为当我尝试这个非常简单的教程时：http ://www.ultramegatech.com/2010/10/create-an-upload-progress-bar-with-php-and-jquery /，效果很好！
然后我稍微调整了一下，得到了一个非常简单（不是 jQuery-UI）的进度条，它也可以工作。这是工作代码：
upload_getprogress.php：
<?php
if (isset($_GET['uid'])) {
$status = uploadprogress_get_info($_GET['uid']);
if ($status) {
echo round($status['bytes_uploaded']/$status['bytes_total']*100);
}
else {
echo 100;
}
}
?>
上传表单.php：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Something</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#progress-bar, #upload-frame {
display: none;
}
</style>
<script>
(function ($) {
var pbar;
var started = false;
$(function () {
$('#upload-form').submit(function() {
$('#upload-form').hide();
pbar = $('#progress-bar');
pbar.show();
$('#upload-frame').load(function () {
started = true;
});
setTimeout(function () {
updateProgress($('#uid').val());
}, 1000);
});
});
function updateProgress(id) {
var time = new Date().getTime();
$.get('upload_getprogress.php', { uid: id, t: time }, function (data) {
var progress = parseInt(data, 10);
if (progress < 100 || !started) {
started = progress < 100;
updateProgress(id);
}
started && $('#inner').css('width', progress+ "%");
});
}
}(jQuery));
</script>
<style>
#progress-bar
{
height:50px;
width:500px;
border:2px solid black;
background-color:white;
margin:20px;
}
#inner
{
height:100%;
background-color:orange;
width:0%;
}
</style>
</head>
<body>
<form id="upload-form"
method="post"
action="upload.php"
enctype="multipart/form-data"
target="upload-frame" >
<input type="hidden"
id="uid"
name="UPLOAD_IDENTIFIER"
value="<?php echo $uid; ?>" >
<input type="file" name="file">
<input type="submit" name="submit" value="Upload!">
</form>
<div id="progress-bar"><div id='inner'></div>
<iframe id="upload-frame" name="upload-frame"></iframe>
</body>
</html>
一切都很好，花花公子，没有问题！所以我知道事实上我设置uploadprogress扩展的方式没有任何问题。
然而，在成功完成演示后，我需要将它集成到我的 javascript 和 jQuery 密集型网络应用程序中，其中包括文件上传。
现在，当我尝试它时，我从 uploadprogress_get_info() 函数中得到“NULL”。为什么？在我的应用程序页面中，我的图片上传表单是动态创建的。但是在我的页面开始时（在用户点击动态创建图像上传表单的按钮之前），我使用了这一行：
<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='<?php echo md5(uniqid(mt_rand())); ?>' />
这是问题吗？是否存在此隐藏输入的特定时间或地点？
在我的页面顶部包含上述行之前，我还包含了一个长的 .js 文件，其中包含一堆 jQuery 插件，但以以下代码开头：
var started = false;
function updateProgress(id) {
console.log("updating progress"); // this msg appears, so i know i'm getting this far
var time = new Date().getTime();
$.get('upload_getprogress.php', { uid: id, t: time }, function (data) {
var progress = parseInt(data, 10);
if (progress < 100 || !started) {
started = progress < 100;
updateProgress(id);
}
//started && pbar.progressbar('value', progress);
$('#inner').css('width', progress+ "%");
});
}
// a lot more functions, then:
function imageDialog(imgtype, x, y, editsource) {
// this function dynamically generates a dialog for image uploading
// which shows up when a user hits an "image upload" button
// there's lots of code that creates a new form which is assigned to $imgform
// lots of elements and a couple of iframes are appended to $imgform
// then finally:
$imgform.submit(function() {
pbar = $('#progress-bar');
$('#inner').css('width', "0%");
pbar.show();
started = true;
setTimeout(function () {
updateProgress($('#uid').val());
}, 1000);
});
/* other irrelevant stuff */
}
但是，虽然上传进度条按预期显示，但它永远不会在进度中增加。
所以我编辑了upload_getprogress.php 看起来像这样：
if (isset($_GET['uid'])) {
$uid = $_GET['uid'];
//$status = uploadprogress_get_info($_GET['uid']);
echo "progress for $uid is: ".uploadprogress_get_info($uid);
}
在 Firefox 中，我可以看到 ajax 调用的响应，从 upload_getprogress.php 得到的输出是：
progress for 6e728b67bd526bceb077c02231d2ec6f is:
我试图转储$status到一个变量并输出到文件，文件说：
the current uid: 02e9a3e0214ffd731265ec5b0b220b4c
the current status: NULL
所以基本上，状态一直在返回NULL。为什么？这在演示中（现在仍然）运行良好，将它集成到我的 Web 应用程序代码中可能会出现什么问题？自行上传图片没有任何问题 - 我的图片上传正常，但没有跟踪进度！
动态创建的表单如下所示：
<div class="dialog-container">
<form id="imgform" method="post" enctype="multipart/form-data" action="upload_1-img.php" target="upload_target">
Select image:
<br>
<input id="image" type="file" name="image">
<div id="imgwrapper"></div>
<input id="filename" type="hidden" value="" name="filename">
<input id="upath" type="hidden" value="xxxxxxxxxxxxxxxxxxxxxxxxxx" name="upath">
<center>
<input id="imgupload" type="submit" onclick="showUploadedItem()" value="Upload">
<input id="clearcrop" type="button" disabled="disabled/" value="Clear selection">
<input id="imgapproved" type="button" disabled="disabled" value="Done">
<input id="imgcancel" type="button" value="Cancel">
</center>
</form>
</div>
<div id="progress-bar"><div id='inner'></div></div>
<!-- etc etc some other elements -->
</div>
我自己的upload_1-img.php 开始于：
$filename = $_FILES["image"]["tmp_name"];
$file_info = new finfo(FILEINFO_MIME);
$bfr = $file_info->buffer(file_get_contents($filename)) or die ("error");
// some more stuff, getting file type and file's $name
if( /* a bunch of conditions */ )
move_uploaded_file( $_FILES["image"]["tmp_name"], $upath . "/" . $name);