JavaScriptでファイル名を取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでファイル名を取得する方法について現役エンジニアが解説しています。ファイル名を取得するには、HTML5から追加されたFile APIを使います。実質JavaScriptで操作します。今回はFileReaderを使ってファイルを読み込んでみます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでファイル名を取得する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでファイル名を取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ローカルのファイル名を取得する方法

ローカルファイルの操作を行うために”File API”がHTML5から新たに追加されました。

このAPIを利用すれば、ローカルファイルを開いたり、サーバに送信したりをごく簡単なコードで実現出来ます。

 

アクセス先のファイル名を取得する方法など

下記の様にinputのタイプで”file”を指定して情報を取得します。

<input id="file" name="file" type="file" />

取得できる情報は

  • name :ファイル名
  • type :ファイルのMIMEタイプ
  • size :ファイルサイズ
  • lastModifiedDate :ファイルの更新日付

などです。

ファイルの中身を取得したい場合は”FileReader API”を利用します。詳しくは、そちらの記事を参照してください。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 TIPS</title>
</head>
<body>
ファイルを選択してください<br>
<input id="file" name="file" type="file" />
<ul>
<li>■ name :ファイル名 :<span id="name"></span></li>
<li>■ type :ファイルのMIMEタイプ:<span id="type"></span></li>
<li>■ size :ファイルサイズ :<span id="size"></span></li>
<li>■ lastModifiedDate :ファイルの更新日付 :<span id="daytime"></span></li>
</ul>
<script>
window.addEventListener('DOMContentLoaded', function() {
// 指定されると動くメッソド
document.querySelector("#file").addEventListener('change', function(e) {
// ブラウザーがFile APIを利用できるか確認
if (window.File) {
// 指定したファイルの情報を取得
var input = document.querySelector('#file').files[0];
// 最後に、反映
document.querySelector('#name').innerHTML = input.name;
document.querySelector('#type').innerHTML = input.type;
document.querySelector('#size').innerHTML = input.size / 1024;
document.querySelector('#daytime').innerHTML = input.lastModifiedDate ;
}
}, true);
});
</script>
</body>
</html>

 

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。iPhoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。