この非常に簡単なチュートリアルを試したとき、uploadprogress 拡張機能のインストールに問題がないことはわかっています。 /、見事に機能しました！
次に、非常に単純な (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 を集中的に使用する Web アプリにデモを統合する必要がありました。
試してみると、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);