HTML5 File APIを利用したサムネイル

質問

画像アップロード前に画像サムネイルのHTML5 File APIします。参考サイトでは理解できましたが、以下のソースにおいて、class=img**で指定した場所にサムネイル表示するにはどうしたらよいのでしょうか？

<img src="ここに画像１" class="img_01">あるいは<span class="img01">ここに画像１</span>

<form enctype="multipart/form-data" method="post">
<p><img src="ここに画像１" class="img_01"><input type="file" name="userfile_01"></p>
<p><img src="ここに画像２" class="img_02"><input type="file" name="userfile_02"></p>
<p><img src="ここに画像３" class="img_03"><input type="file" name="userfile_03"></p>
</form>

以下のfunction内の書き方がわかりません。
$(function() {
$('input[type=file]').after('<span></span>');

// アップロードするファイルを選択
$('input[type=file]').change(function() {
var file = $(this).prop('files')[0];

// 画像以外は処理を停止
if (! file.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);
});
});

参考URL
http://php.o0o0.jp/article/jquery-preview_thumbnail

回答No.2

b0a0a · ベストアンサー

これでいかがですか？

<form enctype="multipart/form-data" method="post">
<p><span class="thumbnail"></span><input type="file" name="userfile_01"></p>
<p><span class="thumbnail"></span><input type="file" name="userfile_02"></p>
<p><span class="thumbnail"></span><input type="file" name="userfile_03"></p>
</form>

<style>
.thumbnail {
display: inline-block;
width: 100px; height: 100px;
border: solid 2px black;
background: no-repeat center/contain;
}
</style>

<script>
addEventListener('DOMContentLoaded', function () {
[].forEach.call(document.querySelectorAll('input[type=file]'), function (elm) {
elm.onchange = function () {
var url = URL.createObjectURL(elm.files[0])
elm.previousElementSibling.style.backgroundImage = 'url(' +url+ ')'
}
})
})
</script>

お礼

大変に助かりました。
もっと勉強します。ありがとうございました。

回答No.1

b0a0a

<style>
.img_01, .img_02, .img_03 { max-width: 100px; max-height: 100px; }
</style>

<script>
addEventListener('DOMContentLoaded', function () {
[].forEach.call(document.querySelectorAll('input[type=file]'), function (elm) {
elm.onchange = function () { elm.previousElementSibling.src = URL.createObjectURL(elm.files[0]) }
})
})
</script>

補足

パーフェクトです。

もうひとつお願いです。
<span class="">ここに画像</span>
の場合はどのようにするかわかりません。

大変申し訳ありません教えてください。困ってます。