はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

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

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=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 を表示する部分

naturalWidthnaturalHeight で取得できる。

            //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;
            }
          

広告を非表示にする