山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで その11

Chapter 6 HTML や XML の文書を操作する - DOM (Document Object Model) -

フォーム要素に関する内容の続きです。

アップロードされたファイルの情報

html
<html>
<head>
</head>
<body>
  <script type="text/javascript" src="../js/sample8.js"></script>
  <form>
    <label for="file">ファイル</label>
    <input type="file" name="file" id="file" multiple>
  </form>
</body>
</html>

File オブジェクトを取得します。

sample8.js
window.addEventListener('DOMContentLoaded', function() {
  document.getElementById('file').addEventListener('change', function(e) {
    var inputs = document.getElementById('file').files;
    for (var i = 0, len = inputs.length; i < len; i++) {
      var input = inputs[i];
      console.log('ファイル名 ' + input.name);
      console.log('種類 ' + input.type);
      console.log('サイズ ' + input.size);
    }
  });
});

テキストファイルを出力

html
<html>
<head>
</head>
<body>
  <script type="text/javascript" src="../js/sample9.js"></script>
  <form>
    <label for="file">ファイル</label>
    <input type="file" name="file" id="file">
  </form>
  <hr />
  <pre id="result"></pre>
</body>
</html>
sample9.js
window.addEventListener('DOMContentLoaded', function() {
  document.getElementById('file').addEventListener('change', function(e) {
    var input = document.getElementById('file').files[0];
    var reader = new FileReader();
    reader.addEventListener('load', function() {
      document.getElementById('result').textContent = reader.result;
    }, true);
    reader.readAsText(input, 'UTF-8');
  });
});