0%

Programmingプログラミングナレッジ

Posted:2020.02.20

FileAPIのreadAsDataURLメソッドでローカルの画像ファイルをブラウザに表示させる

Webアプリケーションやサービスサイトの開発などでは、画像のアップロード機能といった要件が求められることもあります。そんな時はHTMLのinput要素を使ってローカルファイルをアップロードさせるようにするのですが、アップロードした画像ファイルをプレビューとしてウェブページ上に表示させたいという場合もあります。

 

今回はJavascriptとFile APIという機能を使って、ローカルの画像ファイルをウェブページ上に表示させてブラウザで見れるようにしてみたいと思います。

 

まずはHTMLを見ていきます。今回は必要最小限のものにしているためかなりシンプルです。インプット要素となる「input type=”file”」とプレビュー表示用のimg要素、そしてリセット用のbutton要素の3つになります。

【HTML】※一部省略

<input type="file" id="input" value="">
<img src="" id="preview" alt="Image">
<button id="button">画像を削除</button>

 

そのうち、img要素とbutton要素についてはあらかじめ非表示にしておきます。

【CSS】

img,
button {
 display: none;
}

 

次にJavascriptでファイルがセットされた時の各要素の振る舞いを設定していきます。今回はそれぞれの要素のDOMを操作していくことになります。あらかじめ各要素のDOMを取得しておきます。ここでは、input要素のchangeイベントで発火するようにしています。

【Javascript】

const preview = document.getElementById('preview');
const input = document.getElementById('input');
const button = document.getElementById('button');
input.addEventListener('change', function(event){
 const fileData = event.target.files[0];
 if(fileData.type.match('image/*')) {
  const fileReader = new FileReader();
  fileReader.addEventListener('load', function(){
   preview.setAttribute('src', fileReader.result);
   preview.style.display = 'inline';
   button.style.display = 'inline';
  });
  if(fileData) {
   fileReader.readAsDataURL(fileData);
  }
 } else {
  alert('ファイル形式が画像ではありません');
  preview.setAttribute('src', '');
  preview.style.display = 'none';
  button.style.display = 'none';
  input.value = '';
 }
});
button.addEventListener('click', function(){
 preview.setAttribute('src', '');
 preview.style.display = 'none';
 button.style.display = 'none';
 input.value = '';
});

 

まず、input要素にファイルがセットされたら、そのDOMにある「files」のところからファイルの情報を取得しておきます。実際にイベントオブジェクトから参照すると、このようにファイルデータの詳細が確認できます。この時に画像形式であれば、typeの値が「image/jpg」や「image/png」などになっています。

 

次に、セットされたファイルが画像形式の場合のみ処理を続けて、そうでない場合にはアラートを表示させ、セットされたファイルを削除するようにしておきます。処理の中では、まず「new FileReader()」でファイルを読み込んでいきます。そして読み込みが完了したら、その結果をプレビュー用のimg要素のsrcの値に入るようにします。合わせて、プレビュー画像とリセット用ボタンも表示させます。

 

最後に、読み込まれたデータに対して、readAsDataURLメソッドを使ってbase64形式にエンコードされたURLに変換します。こうすることでimg要素のsrcの値として機能するようになります。実際に値を確認してみると、このようにエンコードされたdataURLが入っているのが確認できます。

 

今回はリセット用のボタンも用意しているので、クリックするとセットされたファイルの値とプレビュー用画像を非表示となるようにしておきます。

 

これでローカルの画像ファイルをブラウザ上に表示させることができました。今回のサンプルはこちらからご確認いただけますのでご参考にどうぞ。

 


 

今回はFile APIを使って、ローカルの画像ファイルを扱う方法についてまとめてみました。Web APIにはこのような機能が揃っているおかげでJavascriptを使って簡単に実装することができます。サービスサイトやウェブアプリケーションなどでは比較的見かける機能ですので、その時にはぜひ試してみてください。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】