おはようございます、martinです。前々回ぐらいに、HTML5を用いたプログレスバー付きのファイルアップロードのデモを示しました。この手のスクリプトは、プログレスバーの表示にFlashやJavaを用いていることが多いのですが、ファイルサイズが大きくなる傾向になったり、設置がややこしかったりします。
何件かソース希望のリクエストがあったので、ppBlogからのスピンアウトとして配布しようと思います。配布するやつは、PHPとJavaScript(+CSS)だけでプログレスバーを実現していて、設置も比較的簡単ではないでしょうか。添付ファイルを展開すると以下のファイルが含まれています。
- index.html(ここにアクセス)
- fileUpload.php(PHPでのファイルアップロード処理用)
- oParts.js(プログレスバーのためのJSライブラリ)
- progressbar.png(プログレスバーの画像)
- PIX(アップロードした画像を保存するフォルダ)
基本的には、展開したフォルダを然るべき場所にまるごとアップロードして、index.htmlにアクセスすればOKかなと思います。サーバーによっては、PIXディレクトリのパーミッションの指定が必要かもしれません(707とか)。
画像を保存するディレクトリは、PIXにしていますが、これは適当に名前を変えても良いでしょう。fileUpload.phpの最初の方で指定出来ます。
$pix_dir = 'PIX/'; // 画像を保存するディレクトリ。パーミッションは707とか。
うまく動けば、アップロード中は以下のような画面になっているかと思います。
![ファイル名: shot.png
ファイルサイズ: 15.6KB
→クリックで元のサイズを表示 shot](PIX/s2/1275370140_shot.png)
*あくまでサンプルです。最低限の実装なので、セキュリティ関連は、各自でいじって下さい。JavaScriptをいじれば、プログレスバーに加えて、全体の何パーセントが完了みたいなことも出来るでしょう。
![ファイル名: MultipleFileUpload.zip
ファイルサイズ: 12.7KB attachedIcon](theme/basic/Images/attached.png)
続き »