今回はアップロード時のサムネイル表示です。
以前にも挑戦したことはあるんですが、当時はブラウザによって
HTML5 に対応していないものもあり ajax と PHP での処理を行い
それなりに手間がかかった覚えがあります。
別のプロジェクトにて同僚が使っているのを見て、ちょっと感動した
ため備忘録として記載します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript"><!--
$(function(){
// Image Get
$('#uploadFile').change( function( eObj ) {
var objFile = eObj.target.files && eObj.target.files[0];
if (objFile != null) {
var fReader = new FileReader();
fReader.onload = onImageLoad;
fReader.readAsDataURL(objFile);
}
});
// Image Load
var maxThumWidth = 250;
var objCanvas = document.getElementById('viewThumbnail');
function onImageLoad( eObj ) {
// Work Image
var objImage = document.createElement('img');
objImage.src = eObj.target.result;
var ImgRate = ( objImage.naturalWidth / maxThumWidth );
var ImgWidth = ( objImage.naturalWidth / ImgRate );
var ImgHeight = ( objImage.naturalHeight / ImgRate );
// Canvas drawImage
objCanvas.width = ImgWidth;
objCanvas.height = ImgHeight;
objCanvas.getContext('2d').clearRect(0, 0, ImgWidth, ImgHeight);
objCanvas.getContext('2d').drawImage(objImage, 0, 0, ImgWidth, ImgHeight);
}
});
--></script>
<link rel="stylesheet" href="reset.css" type="text/css">
<style type="text/css"><!--
div {
margin : 10px;
}
--></style>
</head>
<body>
<div id="main_area">
<div id="input_area">
<input type="file" id="uploadFile">
</div>
<div id="view_area">
<canvas id="viewThumbnail"></canvas>
</div>
</div>
</body>
</html>
sample を開くと File の Upload ボタンがあります。
該当の input に対して画像を Upload することで対象画像のサムネイルが表示されます。
正直 jQuery はほとんど使用していません（笑）
html5 と Javascript が基本ですね。
今後は HTML5 が使えない環境もあまり考慮する必要はなくなります。
お客様よりの要望としては、結構多い機能です。
今後は上記の方法にて対応できるようにして行きたいですね。