FileAPI で画像を選択またはドラッグ&ドロップで画像を表示

FileAPI を用いて、画像を選択またはドラッグ&ドロップで、画像を表示させるものをつくりました。また、画像のwidth, heightとDataURLを表示させるもの

実際のページ

http://cartman0.github.io/FileAPI_Sample_SlectReadPrintImage/

コード

FileAPIを用いて、ファイルを選択またはドラッグ&ドロップで画像を選択し、width,heigh ...

FileAPI に対応しているかチェック


// FileAPIに対応しているか
function checkFileApi() {
 // Check for the various File API support.
 if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
  return true;
 }
 alert('The File APIs are not fully supported in this browser.');
 return false;
}

ファイルを選択する部分

HTML

          
<input id="file-image" accept="image/*" type="file">

input type="file" でfileAPI が使えます。

また、accept で選択するファイル形式を選ぶことができます。

accept="image/*"

画像ファイル全般

画像ファイルのみ選べるようになる
accept="video/*"

動画ファイル全般。
accept="audio/*"

オーディオファイル全般。

参考リンク： accept属性 ≪ input要素 ≪ フォーム ≪ 要素 ≪ HTML5入門

JS

   

var file_image = document.getElementById('<input type="file" の id >');
file_image.addEventListener('change', selectReadfile, false);
//ファイルが選択されたら読み込む
function selectReadfile(e) {
 var file = e.target.files;
 var reader = new FileReader();
 //dataURL形式でファイルを読み込む
 reader.readAsDataURL(file[0]);
 //ファイルの読込が終了した時の処理
 reader.onload = function(){
  readImage(reader, print_img_id, print_DataURL_id);
 }
}

ファイルを選択すると、'change'イベントが発火する。 e(event).target.files に選択したファイルの情報がある。

FileReader で読み込むことができ、読み込むファイル形式を選択できる。

FileReader.readAsDataURL(Blob|File);

result プロパティには、「データ URL」としてエンコードされたファイル/ブロブデータが格納される。

こちらがよく使われているようです。
FileReader.readAsText(Blob|File, opt_encoding);

result プロパティには、ファイル/ブロブデータが、「テキスト文字列」として格納される。デフォルトでは、この文字列は「UTF-8」としてデコードされる。
FileReader.readAsBinaryString(Blob|File);

result プロパティには、ファイル/ブロブデータが、「バイナリ文字列」として格納される。各バイトは、0～255 の範囲の整数で表される。
FileReader.readAsArrayBuffer(Blob|File);

result プロパティには、ファイル/ブロブデータが、「ArrayBuffer オブジェクト」として格納される。

参考URL：JavaScript でのローカルファイルの読み込み - HTML5 Rocks

ファイルをドラッグ&ドロップして選択する部分

HTML


<div id="drop-zone">ここにドロップ！</div>

e(event).preventDefault(); でドラッグ内容の文字列へブラウザが遷移するのを防ぐ。

e.dataTransfer.dropEffect = 'copy'; でドラッグした時の挙動をcopy にする。

ドロップした時のファイルは、e(event).dataTransfer.files; に格納されている。

JS

 
 
var dropZone = document.getElementById('<作っていおいたドロップゾーンのid>');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleDragDropFile, false);

//ドラッグオンドロップ
function handleDragOver(e) {
 e.stopPropagation();
 e.preventDefault();
 e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
function handleDragDropFile(e) {
 e.stopPropagation();
 e.preventDefault();
 var files = e.dataTransfer.files; // FileList object.
 var file = files[0];
 var reader = new FileReader();
 //dataURL形式でファイルを読み込む
 reader.readAsDataURL(file);

 //ファイルの読込が終了した時の処理
 reader.onload = function(){
  readImage(reader, print_img_id, print_DataURL_id);
 }
}

読み込んだ画像を表示する部分

で表示することができる。

            //ファイルの読込が終了した時の処理
            function readImage(reader, print_image_id, print_DataURL_id ){
              //ファイル読み取り後の処理
              var result_DataURL = reader.result;

              //読み込んだ画像とdataURLを書き出す
              var img = document.getElementById('image');
              var src = document.createAttribute('src');
              src.value = result_DataURL;
              img.setAttributeNode(src);
              document.getElementById(print_DataURL_id).value = result_DataURL;
            }

画像のwidth とheight を表示する部分

naturalWidth とnaturalHeight で取得できる。

            //width, height表示
            function printWidthHeight( img_id, width_height_id ) {
              var img = document.getElementById(img_id);
              var w = img.naturalWidth;
              var h = img.naturalHeight;
              document.getElementById(width_height_id).innerHTML = 'width:' + w + ' height:' + h;
            }