今回は、画像を添付するとその添付画像を表示するプログラムの作成方法をまとめていきたいと思います。
今回制作するのは、以下のような機能です。
事前準備
まず、以下のようにディレクトリーとファイルと適当な画像の入ったディレクトリー(この画像ではimage-changeという名前)を任意の場所に作成しておきます。
HTMLの記述
index.html
<!DOCTYPE html><html><head><metacharset="utf-8"><script type="text/javascript"src="js/script.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><linkrel="stylesheet"type="text/css"href="css/layout.css"></head><body><outputid="output-image"></output><p>※画像を選択してください</p><br><inputtype="file"id="image-field"onchange="outputReadFile()"></body></html>CSSの記述
layout.css
img{width:200px;}Javascriptの記述
script.js
functionoutputReadFile(){varfile=event.target.files[0];// 添付ファイルのデータを変数fileに格納initializeFile();//初期化if(file){//ファイルが添付されている場合varoutputData=newFileReader;// FileReaderを作成outputData.readAsDataURL(file);// ファイルの読み込みoutputData.onload=outputFile();// ファイルの読み取りを終えたタイミングでoutputFile関数を実行functionoutputFile(){// 添付画像のhtmlを作成returnfunction(event){varimg=document.createElement('img');//img要素を生成img.src=event.target.result;//添付画像の場所を指定varoutputImage=document.getElementById('output-image');// outputタグのidを読み込みoutputImage.insertBefore(img,null);// outputタグの中に添付画像のimgタグを出力$('p').remove();// p要素の"※画像を選択してください"を削除};};}else{//ファイルが添付されていない場合varp=document.createElement('p');// p要素生成p.innerHTML="※画像を選択してください"// p要素の内容を追加varoutputImage=document.getElementById('output-image');//outputタグのidを取得outputImage.after(p);//outputタグの後にp要素を追加}functioninitializeFile(){varoutputImage=document.getElementById('output-image');//outputタグのidを取得outputImage.innerHTML='';//outputタグの中身を削除};};最後に
HTMLとCSSを自分でカスタマイズすると、色々と(例えば、アプリ内のプロフィール画像の編集時や記事の投稿時などで)応用できるので便利です。
何か質問などあればコメントからどうぞ。
