FileReader 画像をプレビューする時には、web APIの一つである FileReader というものを扱います。 こちらを用いることで input で選択したファイルを非同期で読み取ることが可能です。 <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);"> <div id="preview"></div> <script> function preview(obj){ for (i = 0; i < obj.files.length; i++) {…

inputで画像選択した後、 その画像をプレビューとして表示する方法についてまとめていきたいと思います。 FileReader を使ってプレビュー表示する 下記がプレビューを表示するコード <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);"> <div id="preview"></div> <script> function preview(obj){ for (i = 0; i < obj.files.length; i++) { va…

こんにちはKOです。 今回は今まで続けてきたこの技術ブログを経て気づいたことを赤裸々に綴っていこうと思います。 2020年の1月からスタートして現在で約130記事、 3日に一回のペースで書き殴っているという風になります。 PV数は年間で4500PV、一記事あたり…