JavaScriptでローカルファイルを読み込む方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでローカルファイルを読み込む方法について現役エンジニアが解説しています。ローカルファイルを読み込むためにはHTML5のFile APIを使用します。File APIを使うと読み込み、書き込みを行うことが出来ます。

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

JavaScriptでローカルファイルを読み込む方法について解説します。

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

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

 

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

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでローカルファイルを読み込む方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ローカルファイルとは

ローカルファイルとは、自身の端末に保存してある.txtや.xlsxなどの拡張子を持ったファイル形式のデータのことを指します。
 

JavaScriptでローカルファイルを読み込む方法

ローカルファイルを読み込むためにはHTML5のFile APIを使用します。
FileAPIにはいくつかの種類があります。

代表的なものを紹介します。

File API
ファイル読み取りを行うAPI

File API:Writer
ファイルへの書き込みを行うAPI

File API:Directories and System
ディレクトリ階層内にフォルダやファイルの作成・保存を行うAPI

FileAPIは使用しているブラウザによっては使用できない場合があります。

ブラウザ 対応バージョン

  • Internet Explorer 10.0
  • FireFox 3.6以降
  • Chrome 6.0以降
  • Safari 5.1以降
  • Opera 11.1以降

主要ブラウザの最新版であれば基本的には問題ありません。

ブラウザがFileAPIの対応状況を確認するスクリプトがあります。
 

if(window.File && window.FileReader) {

    //File API
    alert("ご使用のブラウザはFile APIを実装しています");
}else{
    alert("ご使用のブラウザはFile APIをサポートしていません");
}

 

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

実際に書いてみよう

読み取ったファイルの各種情報を取得してみます。

HTML
 

<input id="loadFile" type="file">

 

JavaScript
 

function loadFile_changeHandler(e){
var files = e.target.files;
var fileData = "";
for(var i = 0; i < files.length; i++){
var fileVal = files[i];
fileData +=
 'ファイル名:' + escape(fileVal.name) + '<br>' +
 'ファイルサイズ:' + fileVal.size + 'バイト<br>' +
 'MIMEタイプ:' + fileVal.type + '<br>' +
 '最終更新日時:' + fileVal.lastModifiedDate + '<hr>';
}
$('#info').innerHTML = fileData;
}

function $(id) {
return document.querySelector(id);
}

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

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