赤心慶福

html ページから何かをアップロードする場合、最も使われているのは <input type="file"> と記述する input 要素なのだけれど、いろいろと不便な点がある。

• アップロードしている間、ページを操作できない
  
• たいていの場合、アップロードの途中でキャンセルできない
  
• どれくらいアップロードが進んでいるのか、進捗が分からない
  

などなど。これを解決するには、たとえば PHP5 + APC などがある。が、これの場合、動かす対象が PHP4 のサーバ環境だったりすると構築しなおさなくちゃならないのでめんどう。

そういうわけなので、クライアント側でがんばることにする。使うのは jQuery と uploadify プラグイン。また、uploadify は内部で flash を使用するので swfobject.js も。

1. 
   有効にするとファイル選択のためのフォーム部品が変更され、アップロードボタン、ステータス表示部が追加される。
   
   
2. 
   ファイルを選択する。ファイル選択ダイアログはアップロード可能なファイルのみがリストされる。選択時にファイルサイズのチェックも行う。選択するとファイル名とファイルサイズが表示され、アップロードボタンが押せるようになる。
   
   
3. 
   アップロード中。途中でキャンセルできる。進捗とアップロード速度も分かる。
   
   
4. 
   アップロード終わり。
   

とだいたいこんな感じになる。