改訂新版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');
  });
});