画像をinputにドラッグして表示する

Pocket
LINEで送る

IEはダメらしいですが、typeがfileのinputはドラッグ&ドロップでファイルを登録できます。なので、ドロップしたらinputにchangeイベントがおこります。changeイベントが発生したら、FileReaderを使って表示させます。

$(document).on('change', '.img_input', function(e){
	var file = e.target.files[0];
	if(! file.type.match('image.*')) return;

	var reader = new FileReader();
	reader.onload = (function(f) {
		return function(e) {
			$('.img_list').html('<img src="' + e.target.result + '" alt="' + f.name + '"');
		};
	})(file);

	reader.readAsDataURL(file);
});
Pocket
LINEで送る

コメントください

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください