@ HTML

File API:ファイル エーピーアイ

File API(ファイル エーピーアイ)はユーザ環境に保存されたファイルの属性や内容を取得することができる API(Application Programming Interface)のことです。

File API で扱うことができるファイルは、<input type=”file”> で選択されたファイルとドラッグ&ドロップされたファイルの2種類です。

参照したファイルの情報と内容を表示

fileapi_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
input {
  margin-bottom: 20px;
}

#result {
  height: auto;
  border: 5px;
  padding: 10px;
  color: #000;
  border: solid 1px #000;
}
</style>
<script>
function readText() {
  // 選択されたファイルにアクセス
  var fs = document.getElementById("fileref").files;
  var result = document.getElementById("result");
  result.innerHTML = "";
  for (var i = 0; i < fs.length; i++) {
    var f = fs[i];

    document.getElementById("fname").innerHTML = f.name;
    document.getElementById("fsize").innerHTML = f.size;
    document.getElementById("ftype").innerHTML = f.type;

    var fr = new FileReader();
    fr.onload = function() {
      result.innerHTML = fr.result;
    }
    fr.onerror = function() {
      result.innerHTML = "ファイル読み込み中にエラーが発生しました。";
    }
    fr.readAsText(f, "utf-8");
  }
}
</script>
</head>

<body onload="readText()">
<div class="container">
  <p>参照したファイルの情報と内容を表示します。</p>
  <div class="table-responsive">
    <table class="table table-bordered">
      <tr>
        <td>ファイル名:</td>
        <td><span id="fname"></span></td>
      </tr>
      <tr>
        <td>ファイルサイズ:</td>
        <td><span id="fsize"></span>バイト</td>
      </tr>
      <tr>
        <td>MIMEタイプ:</td>
        <td><span id="ftype"></span></td>
      </tr>
    </table>
  </div>
  <input type="file" name="files[]" id="fileref" multiple onchange="readText()">
  <div id="result"></div>
</div>
</body>

</html>

demo

参照した画像の情報と内容を表示

fileapi_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
input {
  margin-bottom: 20px;
}

#result {
  height: auto;
  border: 5px;
  padding: 10px;
  color: #000;
  border: solid 1px #000;
}
</style>
<script>
function readImage() {
  // 選択されたファイルにアクセス
  var fs = document.getElementById("fileref").files;
  var result = document.getElementById("result");
  result.innerHTML = "";
  for (var i = 0; i < fs.length; i++) {
    var f = fs[i];

    document.getElementById("fname").innerHTML = f.name;
    document.getElementById("fsize").innerHTML = f.size;
    document.getElementById("ftype").innerHTML = f.type;

    var fr = new FileReader();
    var img = document.createElement('img');
    fr.onload = function(event) {
      img.src = fr.result;
      result.appendChild(img);
    }
    fr.onerror = function() {
      result.innerHTML = "ファイル読み込み中にエラーが発生しました。";
    }
    fr.readAsDataURL(f);
  }
}
</script>
</head>

<body onload="readImage()">
<div class="container">
  <p>参照した画像の情報と内容を表示します。</p>
  <div class="table-responsive">
    <table class="table table-bordered">
      <tr>
        <td>ファイル名:</td>
        <td><span id="fname"></span></td>
      </tr>
      <tr>
        <td>ファイルサイズ:</td>
        <td><span id="fsize"></span>バイト</td>
      </tr>
      <tr>
        <td>MIMEタイプ:</td>
        <td><span id="ftype"></span></td>
      </tr>
    </table>
  </div>
  <input type="file" name="files[]" id="fileref" multiple onchange="readImage()">
  <div id="result"></div>
</div>
</body>

</html>

demo