1. kon_yu

    No comment

    kon_yu
Changes in body
Source | HTML | Preview
@@ -1,55 +1,55 @@
## はじめに
-フォームの入力の際に、入力に間違いがないかプレビュー表示するしたい
+フォームの入力の際に、入力に間違いがないかプレビュー表示する
この機能を実現するためにFileAPIを利用する
JavaScriptのFileAPIは2016年3月現在ほぼすべてのブラウザに対応している(IEさえも)
本サンプルコードはjQueryで動作します。
jQueryを使っていないのが知りたい人はこちらの[フォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery"無し"版)](http://qiita.com/kon_yu/items/d176eaef22d3892bc49b) を参照のこと
## Demo
動作を確認できるデモはこちら
[Demo](http://jsdo.it/kon_yu/S0gW)
## 対象のコード
```html
<form>
<input type="file">
</form>
<div class="preview" />
```
```js
$(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);
});
});
```