ttp://php.o0o0.jp/article/jquery-preview_thumbnail
ttps://qiita.com/zaru/items/79bb3b189f7ffd37190f
上記のサイトなどを参考にレコード登録のファイル添付にて[参照]を押して画像を選んだ際にサムネイルを表示しようとしたのですが、反映されず手を焼いております。
javascriptにてラベルにidを付け、上記サイトのスクリプトのセレクタを既存のものに変更して見た目は似たようなものになったものの、サムネイルが表示されない状態です。
(resultラベルに#resultsをつけて動作させてみた状態です。)
何か良い手段があればご教示願いたいです。
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 イベント フェーズ」等で検索すると出てくるので、見ておくとよいかもしれません。
どうやって実装するかかなり悩んでいたので非常に助かりました！
javascriptは最近始めたのですがフェーズについては未確認でした。調べてみて今後のスクリプトの作成に役立てたいです。
ありがとうございました！