アップロード時に選択した画像のサムネイルを縮小表示
サーバにアップロードする前に、リサイズ画像を取得
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など特定の環境では使用不可。
