PHPとjQueryでアップロードのプログレスバーを作る方法！手順書⑥「カスタマイズ」
サクウェブＴＶはコチラ↓↓↓
さて、まずはまとめです。
common.php
<?php /*************************************************** * ファイルを拡張子を変えずにアップロードする * 引数： * １．<input type="file"/>でアップロードしたデータ * ２．アップロード後のファイルにつける名前 * ３．アップロード先のディレクトリ名（最後に/をつける必要なし） * 戻り値：成功した場合はアップロード後のファイル名（保存されたファイル名） * 失敗した場合にはfalse ***************************************************/ function upload_files($data,$name,$dir){ if(!empty($data["tmp_name"]) && $data["size"]>0){ $name_array = explode(".",$data["name"]); $extention = $name_array[count($name_array)-1]; $new_name = $name.".".$extention; $file_path = $dir."/".$new_name; if(move_uploaded_file($data["tmp_name"],$file_path)){ return $new_name; }else{ return false; } }else{ return false; } }
?>
index.php
<?php session_start(); require_once("common.php"); if(isset($_POST["create"])){ for($i=1;$i<=6;$i++){ $data = $_FILES["files".$i]; upload_files($data,date("YmdHis").$i,"files"); } } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="some.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <form action="index.php" method="post" enctype="multipart/form-data"> <input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="example" /> <input type="file" name="files1" /><br> <input type="file" name="files2" /><br> <input type="file" name="files3" /><br> <input type="file" name="files4" /><br> <input type="file" name="files5" /><br> <input type="file" name="files6" /><br> <input type="submit" name="create" value="送信" /> </form> <div id="progress_box"> </div> </body> </html>
progress.php
<?php session_start(); $key = ini_get("session.upload_progress.prefix").'example'; echo "<span id='progress'>"; if(isset($_SESSION[$key])){ $data = $_SESSION[$key]; echo round($data["bytes_processed"]/$data["content_length"]*100); }else{ echo "100"; } echo "</span>"; ?>
some.js
(function($){
$.extend({
progressBarStart: function progressBarStart(target,from,progress_id,box_style,back_style,bar_style){
target = target || $("#progress_box");
from = from || "progress.php";
progress_id = progress_id || "#progress";
box_style = box_style || {
padding:"10px",
width:"300px",
border:"1px solid #666666",
background:"#ffffff"
};
back_style = back_style || {
background:"#333333",
width:"100%"
};
bar_style = bar_style || {
background:"#ff0000",
padding:"5px"
};
var first_para = 0;
gogo();
function gogo(){
setTimeout(function(){
first_para==0?createBar():false;
$("#displaynonespan").load(from,function(){
var num = Number($(progress_id).html());
$("#progress_bar_box div div").animate({width:num+"%"},100).html(num + "%");
});
first_para++;
gogo();
},200);
}
function createBar(){
$("body").append("");
target.append("<div id="progress_bar_box"> </div>");
$("#progress_bar_box").css(box_style);
$("#progress_bar_box div").css(back_style);
$("#progress_bar_box div div").css({
width:"0%"
}).css(bar_style);
}
}
});
})(jQuery)
script.js
$(function(){
$("input[name='create']").click(function(){
$.progressBarStart();
});
});
ディレクトリ構成
補足
index.phpに必ず追加する以下の
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="example" />
のvalue値は
progress.phpの
$key = ini_get("session.upload_progress.prefix").'example';
の連結部分と必ず一致させる。
script.jsにて使用している
$.progressBarStart();には引数を指定し、カスタマイズできます。
詳細は以下です。
$.progressBarStart(target,from,progress_id,box_style,back_style,bar_style); 機能：PHPと合わせることでアップロードのプログレスバーを表示する 引数： １．target：プログレスバーを表示したい要素のjQueryオブジェクト ２．from：進捗データを取得するためのphpファイルのURL ３．progress_id：上記fromのファイル内の進捗データを出力している要素のid ４．box_style：プログレスバーの外枠に設定するstyleをJSON形式で指定する ５．back_style：ブログレスバーのバックグラウンドのstyleをJSON形式で指定する ６．bar_style：プログレスバーのstyleをJSON形式で指定する 引数の初期値： １．$("#progress_box") ２．"progress.php" ３．"#progress" ４．{ padding:"10px", width:"300px", border:"1px solid #666666", background:"#ffffff" } ５．{ background:"#333333", width:"100%" } ６．{ background:"#ff0000", padding:"5px" }
引数を指定しないで全てデフォルトで使用する場合は空文字またはnullや0などfalseと判定される値を指定するか、全て指定しないで$.progressBarStart();のように使用してください。
以上。これをcakePHP2.xで使用する方法はまた別の記事で書きます。
