API』というヤツを手始めに覚えようかと思います。APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。APIにはローカルファイルの読み取りだけでなく、書き込みやファイルを操作するAPIも用意されています。APIでアクセスできるのはあくまでユーザーが指定したファイルだけになります。セキュリティの問題上でパスを「C:\file.txt」や「../text/file.txt」の様に指定してファイルを書き直す事はできません。11.1以降まぁまず各主要ブラウザの最新版を使っていれば問題無く実装されている様です。APIに対応しているかがわかります。1ローカルファイルの情報を取得する情報を取得するファイル選択は<input>タグを使用します。複数のファイルを選択できる様にmultiple属性を用います。各パラメーターが変数filesの配列内に格納されます。こちらのデモページでローカルファイルを選択してください。Reader』オブジェクトを利用します。テキストファイルだけでなく、画像などのバイナリファイルも読み取りが可能です。非同期にファイルを読み取り、テキスト文字列を返します。document.querySelector(id);}こちらのデモページでローカルのテキスト形式のファイルを選択してください。デモページ解説1"非同期"でファイルの読み取りが完了するとonloadイベントが発生し、ファイル内容はonloadイベントのイベントハンドラ内で受け取ったデータはtarget.resultプロパティに格納されます。2ユーザーがファイルを選択すると、onchangeイベントが発生するので、このイベントを補足するためのイベントハンドラを指定します。3イベント引き数のtarget.filesプロパティにアクセスして、ファイル情報を調べます。MIMEタイプを表すtypeプロパティをチェックして「text」が含まれていないなら読み取れない旨のメッセージを表示します。4FileReaderのオブジェクトを作成します。5その後、同オブジェクトでreadAsTextメソッドを実行し、読み取りを開始します。6読み取りが完了した際にはonloadイベントが発生するので、onloadプロパティにイベントハンドラを登録しておきます。<textarea>に表示します。※readAsTextメソッドでは、第2引数に"Shift_JIS"を指定しているので、文字コードがShift_JISのテキストを正しく読み取ることができます。このメソッドは、テキストエンコーディングを自動判定できないので文字コードが合致していないと文字化けを起こします。3画像のファイルのサムネイルを表示するFileReaderオブジェクトのreadAsDataURLメソッドを使うと、ファイルを読み取り、URLエンコードされたデータを取得できます。document.querySelector(id);}選択した画像のファイルのサムネイルを表示させるデモがこちらデモページ解説1<form>~</form>ではPHPスクリプトの専用CGI「upload.php」へ画像ファイルをアップロードを想定し、画像のアップロードフォームを定義。2スクリプトでははじめに画像とアップロードボタンを非表示しユーザーがファイル選択したときのonchangeイベントのために、onchangeプロパティにイベントハンドラを設定し、MIMEタイプを調べてファイルが画像かどうか判定します。3そして、FileReaderオブジェクトのreadAsDataURLメソッドを利用して画像ファイルを読み取ります。4非同期に読み取り、onloadイベントが発生するとresultプロパティを参照することで読み取られたデータを取得できます。その後、<img>タグとアップロードを表示します。4バイナリファイルを解析するFilereaderオブジェクトのreadAsBinaryStringメソッドを利用したバイナリファイルの解析は同メソッドで読み取ったデータはJavaScriptの文字列として取得できます。(1バイトが1文字のデータ)文字列なのでcharCodeAtやcharAt等の文字列が持つ各種メソッドを利用できます。document.querySelector(id);}選択されたPNGファイルをバイナリファイルを解析するデモがこちらデモページ解説1バイナリデータとしてデータを読み取るためFileReaderオブジェクトのreadAsBinaryStringメソッドを利用します。2非同期に読み取りを行い、読み取り完了時のonloadイベントでreadPNGFile関数でPNGファイルの解析を行う。3PNGファイルの先頭8バイトは、PNGファイルを識別するための固定シグネチャとなっています。そのため、冒頭8バイトを調べてPNGファイルかどうか判定しています。4String.fromCharCodeメソッドを使うと、特定のバイトからなる文字列を作成できます。これを利用してPNGファイルのシグネチャ文字列を作成しています。String.substrメソッドを利用すれば、文字列の一部を切り取ることができます。文字列を比較することで連続するバイナリがPNGファイルのシグネチャかどうかを判定できます。5PNG画像であるか判明したら、サムネイルを表示し、readAsDataURLメソッドを利用してimgタグのsrc属性に読み取ったデータを設定します。6バイナリデータの解析では、複数バイトからなる数値を読み取る必要があり、これを行うのがgetBinValue関数です。※PNG画像の幅や高さは、4バイトの数値として記録されるので、同関数を利用して4バイトのバイナリの文字列を、シフト演算などを使って数値に変換しています。