FileReader(+JQuery)を利用して複数ファイルを選択した画像を画面に表示させる

( Html ) 






File API sample(jquery version)





    file name:
    file size:

HTML５の勉強っす。

今回はFileRead()を利用してみた。って話。

まだ策定中のFile APIなのですが、これを利用するとjavascriptからファイル情報や内容を読み込んで アクセスができるようになるみたいですね。例をあげるとファイルをアップロードするときに予め対象の 画像情報を表示させといてから非同期で画像を保存する。的なこと簡単にできてしまうわけです。

現在はFirefoxでは実装されていてつかえるみたいなのですが、まだChromeで利用できないみたいですね。 ここいらへんで騒いでいます。

実際、まだ全体的にみても策定中のようで「FileWriter」なんてものもあるらしくてこれが決定！！というわけではない。とのこと。 なので、今後仕様が変わっていってしまうのは大いにあるようです。

だけどおもしろそうだったのでやってみた。

まずは、HTMLに

を記述してから複数ファイルを選択できるようにします。 (この時点でもうフラッシュいらないですね。はい。)

次は関数を呼ぶ。

// 読み込み用メソッド
function readFile() {
    // タグからファイル情報を読み込む
    var files = document.getElementById("file").files;
    
    // 配列作成
	var data = new Array();
    
    // 選択ファイル分走査する
    for (var cnt=0;cnt

複数選択したとき用にループしてファイルを走査する。


FileReaderCustomの中身でやっているものは


  • Onloadイベント処理の登録
    • 
ファイル情報を読み込んで画面に描画させる
ここで画像情報を「reader.result」から取得してimgタグの「src」属性として登録する

  • onprogressイベント処理の登録
    • 
現在処理中のファイル名を表示する

  • loadedendイベントイベント処理の登録
    • 
ログ「onprogressで表示した」情報を削除する

  • ファイルを指定した形式にして情報を読取る
    • 

    できた！！これでボタンを押せば読み込みが始まります。
あとは非同期でデータをPOSTしてやればOK。
    

    ■感想
・「input」タグのmultiple属性POSTしたらどうなるのかな？
・ファイルをアップするときになんていうかいい感じに連続的に表示できないかなーっておもった。
・ロード中の画像はその画像上かどこかに身長情報載せたい。
・クロスブラウザ対応できたら最高やね。。
・後ろ側の通信しなきゃね。
    

    ■デモ