我知道我沒有安裝uploadprogress擴展的問題,因爲當我嘗試這個非常簡單的教程:http://www.ultramegatech.com/2010/10/create-an-upload-progress-bar-with-php-and-jquery/,它工作得很漂亮!uploadprogress_get_info正確安裝,但不能用不同的代碼工作
然後我調整它只是有一個非常簡單的(而不是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密集型Web應用程序中,其中包括文件上載。
現在,當我嘗試它時,我從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);