1. kon_yu

    Posted

    kon_yu
Changes in title
+フォームからファイルを選択した際に、submitする前にプレビュー表示する方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,52 @@
+## はじめに
+フォームの入力の際に、入力に間違いがないかプレビュー表示するしたい
+この機能を実現するためにFileAPIを利用する
+JavaScriptのFileAPIは2016年3月現在ほぼすべてのブラウザに対応している(IEさえも)
+
+## 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);
+ });
+});
+
+```