12周年記念パーティ開催! 2024/5/10(金) 19:00

ファイル選択UIのカスタマイズ

全2回

ユーザーがファイルをアップロードする際などに使われる、ファイル選択をするためのUIをカスタマイズするシリーズです。HTMLとCSSのみでボタンをカスタマイズしたり、Vue.jsでファイル選択時のファイル名や画像のプレビュー表示などを行います。

後編 選択したファイル情報の利用

input要素で選択したファイルの情報を、JavaScriptから利用する方法について解説します。ファイル名やファイルのサイズ・タイプを取得し、UI上でファイルのプレビューができるようにしましょう。

前編 input要素のファイル選択UI

input要素のtype属性をfileにすると、ファイルを選択するためのUIになります。その見た目をカスタマイズするためのコツを解説します。