Edited at

フォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery版)

More than 3 years have passed since last update.


はじめに

フォームの入力の際に、入力に間違いがないかプレビュー表示する

この機能を実現するためにFileAPIを利用する

JavaScriptのFileAPIは2016年3月現在ほぼすべてのブラウザに対応している(IEさえも)

本サンプルコードはjQueryで動作します。

jQueryを使っていないのが知りたい人はこちらのフォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery"無し"版) を参照のこと


Demo

動作を確認できるデモはこちら

Demo


対象のコード

<form>

<input type="file">
</form>

<div class="preview" />

$(function(){

//画像ファイルプレビュー表示のイベント追加 fileを選択時に発火するイベントを登録
$('form').on('change', 'input[type="file"]', function(e) {
var file = e.target.files[0],
reader = new FileReader(),
$preview = $(".preview");
t = this;

// 画像ファイル以外の場合は何もしない
if(file.type.indexOf("image") < 0){
return false;
}

// ファイル読み込みが完了した際のイベント登録
reader.onload = (function(file) {
return function(e) {
//既存のプレビューを削除
$preview.empty();
// .prevewの領域の中にロードした画像を表示するimageタグを追加
$preview.append($('<img>').attr({
src: e.target.result,
width: "150px",
class: "preview",
title: file.name
}));
};
})(file);

reader.readAsDataURL(file);
});
});