# kintone 画像アップロードの際にサムネイルが表示されるようにしたい

**URL:** https://community.cybozu.dev/t/topic/2973
**Category:** kintone 開発相談
**Created:** [2018 年 4 月 4 日午前 10:07 UTC](https://community.cybozu.dev/t/topic/2973 "2018-04-04T10:07:39Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Legacy\_Account671](https://avatars.discourse-cdn.com/v4/letter/l/22d042/32.png) [@Legacy\_Account671](https://community.cybozu.dev/u/Legacy_Account671)
#### Post date: [2018 年 4 月 4 日午前 10:07 UTC](https://community.cybozu.dev/t/topic/2973/1 "2018-04-04T10:07:39Z")

</div>

ttp://php.o0o0.jp/article/jquery-preview\_thumbnail

ttps://qiita.com/zaru/items/79bb3b189f7ffd37190f

上記のサイトなどを参考にレコード登録のファイル添付にて[参照]を押して画像を選んだ際にサムネイルを表示しようとしたのですが、反映されず手を焼いております。

javascriptにてラベルにidを付け、上記サイトのスクリプトのセレクタを既存のものに変更して見た目は似たようなものになったものの、サムネイルが表示されない状態です。

&nbsp;

(resultラベルに#resultsをつけて動作させてみた状態です。)

何か良い手段があればご教示願いたいです。

---

<div class="post-metadata">

### Author: ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)
#### Post date: [2018 年 4 月 7 日午前 8:35 UTC](https://community.cybozu.dev/t/topic/2973/2 "2018-04-07T08:35:47Z")

</div>

camel様

お世話になっております。 cstapの江田です。

kintoneの仕様でinput要素の中身(files)が毎度リセットされているようなので、キャプチャフェーズで画像データを取得する必要があります。 以下のようなコードで実装できるかと思います。

```
(function(){"use strict";kintone.events.on(['app.record.create.show','app.record.edit.show'],function(event){varspan=document.createElement('span');document.getElementById("record-gaia").appendChild(span);// アップロードするファイルを選択document.addEventListener('change',function(event){if(event.target.type!=='file')return;[].forEach.call(event.target.files,function(file){// 一応、multipleに対応// 画像以外は処理を停止if(!file.type.match('image.\*'))return;// 画像表示varreader=newFileReader();reader.onload=function(){varimg=document.createElement('img');img.setAttribute('src',reader.result);span.appendChild(img);}reader.readAsDataURL(file);});},true);// キャプチャフェーズに実行});})();

```

キャプチャフェーズについては、「Javascript イベント フェーズ」等で検索すると出てくるので、見ておくとよいかもしれません。

---

<div class="post-metadata">

### Author: ![Legacy\_Account671](https://avatars.discourse-cdn.com/v4/letter/l/22d042/32.png) [@Legacy\_Account671](https://community.cybozu.dev/u/Legacy_Account671)
#### Post date: [2018 年 4 月 9 日午前 1:14 UTC](https://community.cybozu.dev/t/topic/2973/3 "2018-04-09T01:14:35Z")

</div>

どうやって実装するかかなり悩んでいたので非常に助かりました！

javascriptは最近始めたのですがフェーズについては未確認でした。調べてみて今後のスクリプトの作成に役立てたいです。

ありがとうございました！

&nbsp;
