我知道我在安装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;
}
}
?>
upload_form.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())); ?>' />
这是问题吗?是否存在这个隐藏输入的特定时间或地点?
在将上面一行包含在我的页面顶部之前,我还包含了一个包含一堆jQuery插件的长.js文件,但是从以下代码开始:
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);
答案 0 :(得分:0)
哇噢!我想通了,多亏了这个错误:
https://bugs.php.net/bug.php?id=57505
基本上,我只是从用户上传文件的页面中删除了这条静态行:
<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='<?php echo md5(uniqid(mt_rand())); ?>' />
在我动态创建图像对话框的javascript函数中,我只是动态地添加了隐藏的输入,就在我生成文件输入的行的正上方。
因此,动态创建的表单的相关部分如下所示:
<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='1325a38f3355c0b1b4' />
<input id="image" type="file" name="image">
现在因为这是通过javascript动态创建的,我可以用随机的js函数替换上面的值。
现在进度条正在进步! :d