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

今回の記事は、

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

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

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

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

分かりやすく簡潔に解説していきますので、ぜひ最後までご覧くださいね。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

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プロパティにアクセスすることで、ファイル名を取得することができます。

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

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

動作確認用

最後に

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

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

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

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

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

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

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ