PHPとjQueryでアップロードのプログレスバーを作る方法！手順書②「作成」
サクウェブＴＶはコチラ↓↓↓
では、手順です。
① アップロードシステムを作る
② フォームに
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="任意" />
を記述。
③ 進捗状況をキャッチするPHPファイルを作成
④ 進捗を取得しプログレスバーを表示するJavaScriptを記述する
⑤ 動作確認
アップロードシステムを作る
ここは簡単に済ませます。
common.phpという名で以下を保存してください。
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という名で以下を記述してください。
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="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>
はい。これでルートディレクトリにfilesフォルダを作成すれば、filesフォルダに全てアップロードされます。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="some.js"></script> <script type="text/javascript" src="script.js"></script>
の部分でわかると思いますが、ルートディレクトリのjQueryを読み込み、
some.jsとscript.jsは空っぽで構わないので作成して読み込んでおいてください。
今回は、プログレスバーを作成するのが目的なので、アップロードのボリュームを増やすために６つファイルを選択するようにしてあります。
もっと増やしたい減らしたい場合は自由に変えてください。
