Web制作メモ -トップへ-

[HTML5] File APIでローカルファイルを表示する

HTML&CSS2014.12.10 19:13

ローカルファイルとはクライアントマシンのファイルのことです。

HTML5のFile APIを使えば、送信する前にクライアントマシンのファイルを操作することができます。

画像アップローダーなどでファイルを送信する前にサムネイル画像を表示したい場合などに利用できます。

送信せず表示できるので、送信してからサムネイルを表示する方法に比べて表示が早いです。

HTML

<input type="file" id="upload">
<p id="info"></p>
<img id="preview">

jQuery

$("#upload").change(function(){
  var file = $(this).prop('files')[0];

  if(!file){
    return; //未対応なので何もせずリターン
  }

  //ファイル情報を表示
  $('#info').html('ファイル名:' + file.name + '<br>種類:' + file.type + '<br>サイズ:' + file.size);

  //ファイル読み込み
  var fr = new FileReader();
  fr.onload = function(e){
	  $('#preview').attr('src', e.target.result);
  }
  fr.readAsDataURL(file);

});

サンプルページ