初心者による ファイルアップロードの扱い

概要

ファイル選択ボックスから、指定されたファイルの情報を取得する。これにはfileプロパティをつかう。

sample.html

<form>
 <label for="file">ファイル：</label>
 <input id="file" name="file" type="file" multiple />
</form>

sample.js

//windowオブジェクトを使う
window.addEvenetListener('DOMContentLoaded', function() {
 //changeイベントはeを引数に入れる
 document.getElementById('file').addEvenetListener('change', function(e) {
  //filesプロパティ
  let inputs = document.getElementById('file').files
  for(let i = 0,len = inputs.length; i < len; i++){
   let input = inputs[i]
   console.log('ファイル名： ' + input.name)
   console.log('種類： ' + input.type)
   console.log('サイズ：'  + input.size / 1024 + 'KB')
   console.log('最終更新日：' + input.lastModifiedDate)
  }
 }, true)
})

fileプロパティはアップロードされたファイル群(fileListオブジェクト)を返します。
fileオブジェクトで利用できるプロパティは、

name : ファイル名
type : コンテンツタイプ
size : サイズ(バイト単位)
lastModifiedDtate : 最終更新日

FileReaderオブジェクト

fileReaderオブジェクトを利用することで、取得したfileオブジェクトの内容を読み込みことができる。

sample.js

reader.readAsText(file[, charset])
 //reader : fileReaderオブジェクト　file : 読み込むファイル charset : 文字コード

テキストファイルの内容を取得する

sample.html

<form>
 <label for="file">ファイル：</label>
 <input id="file" type="file" />
</form>
<hr />
<pre id="result"></pre>

sample.js

window.addEventListener('DOMContentLoaded', function() {
 document.getElementById('file').addEvenetListener('change', function() {
  //実際は１つでも配列のように扱う
  let input = document.getElementById('file').files[0]
  //FileReaderオブジェクトを生成
  let reader = new FileReader()
  //定義
  reader.addEvenetListener('load', function() {
   document.getElementById('result').textContent = reader.result
  }, true)
  //呼び出し(ファイルの呼び出し)
  reader.readAsText(input, 'UTF-8')
 }, true)
})

読み込んだテキストはFileReader.resultプロパティでアクセスできます。なお、reader.readAsTextメソッドでファイルの読み込みを開始する。

ファイル読み込みに失敗した場合

FileReaderオブジェクトでは、errorイベントリスナーを設定しておくことで、エラー処理をすることができる。エラー原因はreader.error.messageプロパティにアクセスすることで、確認することができる。

sample.js

reader.addEventListener('error', function() {
 console.log(reader.error.message)
}, true)

バイナリファイルの内容を取得する

バイナリファイルを読み込むには、readAsTextの代わりにreadAsDataURLメソッドを利用する。これによってバイナリファイルをData URLという形式で取得できます。Data URLとは、URLに直接、画像/音声等のデータを埋め込むための表現でい一般的には、

data:[コンテンツタイプ][;base64],データ本体

Data URL形式のデータは、img要素のsrc属性やa要素のhref属性にそのまま埋め込むことができるので、データをいちいちファイルとして保存する必要がありません。

sample.html

<form>
 <label for="file">ファイル：</label>
 <input id="file" name="file" type="file" />
</form>
<hr />
<img id="result" />

sample.js

window.addEvenetListener('DOMContentLoaded', function() {
 document.getElementById('file').addEvenetListener('change', function(e) {
  let input = document.getElementById('file').files[0]
  let reader = new FileReader()
  reader.addEvenetListener('load', function(e) {
   document.getElementById('result').src = reader.result
  }, true)
  reader.readAsDataURL(input)
 }, true)
})

これで読み込んだ画像ファイルを出力することができるようになった。またAjaxを用いることによって、データベースに保存することもできる。

参考資料

山田祥寛様　「javascript本格入門」