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

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

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() { 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.*')) { $('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[i]); img_count = img_count + 1; }); }); });

HTML

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

最新の記事

プロフィール

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