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