今回はアップロード時のサムネイル表示です。
以前にも挑戦したことはあるんですが、当時はブラウザによって
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 が使えない環境もあまり考慮する必要はなくなります。
お客様よりの要望としては、結構多い機能です。
今後は上記の方法にて対応できるようにして行きたいですね。