アップロード時に選択した画像のサムネイルを縮小表示

サーバにアップロードする前に、リサイズ画像を取得

HTML5 File APIを利用。

jQuery

$(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; // 画像以外は処理を停止 if (! file.type.match('image.*')) { // クリア $(this).val(''); $('span').html(''); return; } // 新幅・高さ var new_w = 200; var new_h = 200; // 画像表示 var reader = new FileReader(); reader.onload = function() { var img_src = $('<img>').attr('src', reader.result); var org_img = new Image(); org_img.src = reader.result; org_img.onload = function() { // 元幅・高さ var org_w = this.width; var org_h = this.height; // 幅 < 規定幅 && 高さ < 規定高さ if (org_w < new_w && org_h < new_h) { // 幅・高さは変更しない new_w = org_w; new_h = org_h; } else { // 幅 > 規定幅 || 高さ > 規定高さ if (org_w > org_h) { // 幅 > 高さ var percent_w = new_w / org_w; // 幅を規定幅、高さを計算 new_h = Math.ceil(org_h * percent_w); } else if (org_w < org_h) { // 幅 <高さ var percent_h = new_h / org_h; // 高さを規定幅、幅を計算 new_w = Math.ceil(org_w * percent_h); } } // リサイズ画像 $('span').html($('<canvas>').attr({ 'id': 'canvas', 'width': new_w, 'height': new_h })); var ctx = $('#canvas')[0].getContext('2d'); var resize_img = new Image(); resize_img.src = reader.result; ctx.drawImage(resize_img, 0, 0, new_w, new_h); }; } reader.readAsDataURL(file); }); });

File APIはIE9以下では使用不可。

HTML

<form enctype="multipart/form-data" method="post"> <input type="file" name="userfile" accept="image/*"> </form>

サンプル

複数対応

jQuery

$(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを複数選択 $('input[type=file]').change(function() { $('span').html(''); var file = $(this).prop('files'); var img_count = 1; $(file).each(function(i) { // 5枚まで if (img_count > 5) { return false; } if (! file[i].type.match('image.*')) { $(this).val(''); $('span').html(''); return; } var reader = new FileReader(); reader.onload = function(){ var img_src = $('<img>').attr('src', reader.result); $('span').append(img_src); } var new_w = 200; var new_h = 200; var reader = new FileReader(); reader.onload = function(){ var img_src = $('<img>').attr('src', reader.result); var org_img = new Image(); org_img.src = reader.result; org_img.onload = function(){ var org_w = this.width; var org_h = this.height; if (org_w < new_w && org_h < new_h) { new_w = org_w; new_h = org_h; } else { if (org_w > org_h) { var percent_w = new_w / org_w; new_h = Math.ceil(org_h * percent_w); } else if (org_w < org_h) { var percent_h = new_h / org_h; new_w = Math.ceil(org_w * percent_h); } } $('span').append($('<canvas>').attr({ 'id' : 'canvas' + i, 'width' : new_w, 'height' : new_h })); var ctx = $('#canvas' + i)[0].getContext('2d'); var resize_img = new Image(); resize_img.src = reader.result; ctx.drawImage(resize_img, 0, 0, new_w, new_h); var dataURL = $('#canvas' + i)[0].toDataURL(); $('#debug').html(dataURL); console.log(dataURL); }; } reader.readAsDataURL(file[i]); img_count = img_count + 1; }); }); });

HTML

<form enctype="multipart/form-data" method="post"> <input type="file" name="userfile[]" accept="image/*" multiple> </form>

multipleはAndroidなど特定の環境では使用不可。

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。