【Javascript】ファイル名を取得する方法【コピペで動きます】

今回の記事は、

  • Javascriptを使ってファイルの情報を取得したい
  • Javascriptを使ってアップロードしたファイルのファイル名を表示したい

というお悩みをお持ちの方に向けた記事になっています。

アップロードしたファイルのファイル名を表示するという機能は今日のWebサイトでも多く見受けられますが、実際にはJavascriptを使うととても簡単に実装することができます

今後も引き続き必要となる機能ですので、ぜひこの機会にマスターしておいてくださいね。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


Javascriptを使ってファイル情報を取得する方法

ではまずはアップロードしたファイルの情報をJavascriptで取得する方法を見ていきましょう。

ブラウザ上でアップロードされたファイルの情報は、HTML5の「FileReader API」を利用することで簡単に取得することができます。

早速実装例から見ていきましょう。

実装コード

<input id="file1" type="file" onChange="uploadFile1()">

<script>
function uploadFile1() {
  const file1 = document.getElementById("file1").files[0]
  console.log(file1)
}
</script>

出力結果

=> File {name: "example.png", lastModified: 1574993963019, lastModifiedDate: Fri Nov 29 2019 11:19:23 GMT+0900 (日本標準時), webkitRelativePath: "", size: 283866, …}

上記のコードでは以下のことを実施しています。

  • 1. ファイルがアップロードされたタイミング(onChange)でuploadFile1メソッドを動かす
  • 2. JavascriptのgetElementById()メソッドでfile1というid属性を持つinput要素を取得
  • 3. 取得した要素のfilesプロパティへアクセスし、ファイル情報を取得

実際に以下のボタンで動作確認をし、ディベロッパーツールのconsole画面を見てみてください。

ご自身がアップロードされたファイルの情報が得られているかと思います。

動作確認用

  

Javascriptを使ってファイル名を取得する方法

それでは、実際にファイル名を取得してみましょう。

実装コード

<input id="file2" type="file" onChange="uploadFile2()">

<script>
function uploadFile2() {
  const file2 =  document.getElementById("file2").files[0]
  document.getElementById("file-name").innerHTML = `アップロードされたファイルの名前は${file2.name}です。`
}
</script>

このように、Javascriptを使ってFileオブジェクト(file2)を取得し、そのFileオブジェクトのnameプロパティにアクセスすることで、ファイル名を取得することができます

この他、typesizeプロパティへアクセスすることでファイルの種類(jpg / png など)サイズも取得可能です。

実際に以下のボタンで動作確認をしてみてください。

動作確認用


お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、アップロードしたファイル情報やファイル名をJavascriptで取得する方法について解説してきましたがいかがでしたか?

こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。

Javascriptを使用すると簡単にファイル情報へアクセスすることができ、その情報を使った処理も様々なものが考えられます。

その中でも、ファイル名を使った処理は頻繁に目にすることになるかと思いますので、今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。