input[type=”file”]で画像アップロード時にプレビューを表示する

Question

試行錯誤しているのですが、分からなく、
アドバイスをいただけたら幸いです。

以下のコードで
「input fileをクリックすると、span要素の中にファイル名のテキストを挿入する」が実現できています。

これを、「input fileをクリックすると、labelタグの後ろにhtmlを挿入する」にはどうしたらよいでしょうか？
取得したファイルをプレビュー表示したいと考えています。

よろしくお願い致します。

<div><label class='camera' for='myimg'><input type="file" id='myimg' name='file'></label><span></span></div>

$('input[type=file]').change(function() {
var file = $(this).prop('files')[0];
$(this).parent().parent().find('span').text(file.name);
});

Comments

[int32_t]

「input type file 画像 プレビュー」で検索してみました?

[yambejp]

> span要素の中にhtmlを挿入する

の意味がよくわかりません、画像のプレビューを表示したいのではなく
なにか特殊なHTMLを表示するのでしょうか？

[退会済みユーザー]

> span要素の中にhtmlを挿入する
> > の意味がよくわかりません
失礼しました。span要素ではなくても、もちろん構いません。
単純に画像のプレビューを表示したいだけです。

[退会済みユーザー]

>「input type file 画像 プレビュー」で検索してみました?
それに近いワードで検索したつもりですが、まだできていません。。

[退会済みユーザー]

＞>「input type file 画像 プレビュー」で検索してみました?
失礼しました。teratailで検索したら、同じ事象がありました。ありがとうございます。

Answer 1

input[type=”file”]で画像アップロード時にプレビューを表示する

以下の記事は、クライアントの PC にある画像を HTML5 の File API を利用して取得し、それを指定のサイズに縮小して HTML5 の canvas に描画し、canvas に描画された画像を jQuery.Ajax を使って Web サーバーにアップするサンプルです。

記事の「canvas に描画」というところまで実装して「プレビューを表示」は実現できませんか？

canvas の画像をアップロード
http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

JavaScript のコードで <%=FileUpload1.ClientID%> となっている部分は ASP.NET 用ですが、そこは input type="file" 要素の id に読み替えてください。

Comments

[退会済みユーザー]

ありがとうございます。
参考になり、結果的に実装できました。