アップロード時に選択した画像のサムネイルを表示
サーバにアップロードする前に、画像を取得
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 reader = new FileReader();
reader.onload = function() {
var img_src = $('<img>').attr('src', reader.result);
$('span').html(img_src);
}
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);
}
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など特定の環境では使用不可。
