PECL uploadprogress、codeigniterメソッド(サーバー側のphpスクリプト用)およびjQuery(サーバーへの呼び出しとパーセンテージの計算など)を使用してアップロードバーを実装していますが、getProgressスクリプトを実行するstartProgressスクリプトを呼び出すときに少し問題がありますそのコールバックphpメソッドをループします。私はグーグルクロームコンソールを見て、次のことを確認します
ファイルの送信を開始するとすぐに、phpメソッドを呼び出す投稿がキャンセルされ、エラーがどこにあるかがわかりません。明らかに、json_get_uploadprogressメソッドへのループをブレーキして残りのバイトをクエリします。よろしくお願いします
フォーム:
<script type="text/javascript">
$(document).ready(function(){
$('#uploadform').submit(function() {
var uid = $("#uid").val();
startProgress(uid);
});
});
<div class="forms" style="margin:20px;clear: left">
<form id="uploadform" action="/miadmin/upload_foto" enctype="multipart/form-data" method="post" class="forms">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $unique_id ?>" id="progress_key" />
<input type="hidden" name="cliente" value="<?php echo $dir_id ?>" />
<input type="file" value="Selecciona una foto" name="foto" id="foto" style="float:left;width:400px" /><br>
<input type="submit" value="Agregar" id="agregar" style="float:left" />
</form>
<div id="progressBar" class="progressbar"></div>
<iframe id="uploadIframe" name="uploadIframe" src=""></iframe>
<script type="text/javascript">var url = "<?php echo base_url();?>";</script>
<script type="text/javascript" src="<?php echo base_url();?>js/uploadprogress.js"></script>
<?php } ?>
</div>
phpを呼び出すためのJavascriptコード:
function getProgress(uploadKey){
$.post("json_get_uploadprogress",{"upload_id":uploadKey},
function(data)
{
if(!data) return;
var result = data.result;
var percentage = 0;
percentage = data.percentage;
if (percentage > 0) {
$("#progressBar").html("<h3>Upload progress...</h3><div cass='progressGrey'>"+result+" <div class='progressRed' style='width:"+percentage+"%'>"+result+"</div></div>");
} else {
$("#progressBar").html("<h3>Upload progress...</h3><div xlass='progressGrey'>"+result+"</div>");
}
if (percentage < 100) {
var timeoutID = window.setTimeout("getProgress(theUploadKey)", 1000); //query every 1 second
}
if(percentage >= 100)
{
$("iframe#uploadIframe").css('display','block');
var body = $("iframe#uploadIframe").contents().find("body");
//Remaquetamos el body del iframe por culpa de IE
body.css('border','0px none');
body.css('background-color',$("body").css('background-color'));
body.css('text-align','center');
}
}, "json"
);
}
function startProgress(uploadKey) {
theUploadKey = uploadKey;
$("#progressBar").css('display','block');
$("#progressBar").html("<h3>Upload progress...</h3><div class='progressGrey'> </div>");
$("form#uploadform").css('display','none');
getProgress(uploadKey);
return null;
}
およびphpメソッド:
public function json_get_uploadprogress()
{
$data = array();
if($this->input->post('upload_id'))
{
$uploadKey = $this->input->post('upload_id');
$status = false;
$percentage = 0;
$result = "INITIALISING UPLOAD";
$data["percentage"] = $percentage;
$data["result"] = $result;
if (function_exists('uploadprogress_get_info'))
{
$status = uploadprogress_get_info($this->input->get('uid'));
}
if (is_array($status))
{
log_message("error", "STATUS: ".print_r($status,TRUE));
if (array_key_exists("bytes_total", $status) && array_key_exists("bytes_uploaded", $status))
{
$percentage = round((($status['bytes_uploaded'] / $status['bytes_total']) * 100),2);
if ($status['bytes_uploaded'] >= $status['bytes_total'])
{
$percentage = 100;
$result = "UPLOAD COMPLETE";
}
else
{
$bytes = array('B','KB','MB','GB','TB');
foreach($bytes as $val)
{
if($status["bytes_total"] > 1024)
{
$status["bytes_total"] = $status["bytes_total"] / 1024;
$status["bytes_uploaded"] = $status["bytes_uploaded"] / 1024;
}
else
{
break;
}
}
$result = $percentage."% (".round($status["bytes_uploaded"], 2)." ";
$result.= $val." of ".round($status["bytes_total"], 2)." ".$val.")";
}
$data["percentage"] = $percentage;
$data["result"] = $result;
}
}
}
$this->load->view('miadmin/json_response_view',array("array" => $data));
}
ビューjson_response_view.phpには、json形式のデータ応答のみが含まれます。
echo json_encode($array);