PHPとjQueryでアップロードのプログレスバーを作る方法!手順書⑤「作成」
最後にindex.phpで読み込んだsome.jsとscript.jsを記述します。
Ajaxから進捗状況を断続的に取り出し、プログレスバーとして表示するための記述です。
では、some.jsに以下を記述します。
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("<span id='displaynonespan' style='display:none'></span>"); target.append("<div id='progress_bar_box'><div><div></div></div></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内でより単純な記述で実装、カスタマイズができるようプラグイン化してあります。HTML内で読み込むだけで、この後のscript.jsで使用できます。
ちなみにここで定義したprogressBarStart()の中でAjaxを使用しています。
さて、次にscript.jsを以下のように記述して下さい。
script.js
$(function(){ $("input[name='create']").click(function(){ $.progressBarStart(); }); });
これで完成です。
index.phpにアクセスしてサイズの大きめのファイルを6つアップロードしてみてください。
デフォルトの簡単なプログレスバーが表示されるはずです。
実行結果を動画で貼り付けます。ご覧ください。
ここまででとりあえず動くものが作れました。
この後の記事でプログレスバーのデザインを変更したり、いくつかのカスタマイズ方法、実装の注意などをまとめます。
また、ここまで細かいことはあまり書きませんでしたが、この後の記事では自分の備忘録的に必要なことを書きますので、よくわからないことがあった場合は参考にしてもらえればと思います。