2013-10-20

javascript：ファイルの読み込み

ボタンをクリックしてでファイルを読み込む

サンプル
応用例（GPXファイルを加工するウェブアプリ）

◆html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>File API (Input)</title>
  6. <script src="FileInput.js"></src>
  7. <style>
  8. #disp img {
  9.  height: 75px;
  10.  border: 1px solid #000;
  11.  margin: 10px 5px 0 0;
  12.  float: left;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <input type="file" id="files" multiple />
  18. <div id="disp" ></div>
  19. </body>
  20. </html>

◆javascript(FileInput.js)

22-28行目：ファイルが画像の場合の処理（height=75pxの大きさで画像を表示）
31-36行目：ファイルが画像以外の場合の処理（テキストを表示）
  1. window.onload = function() {
  2.  if (window.File) {
  3.      // File APIに関する処理を記述
  4. //      window.alert("File APIが実装されてます。");
  5.   document.getElementById('files').addEventListener('change', handleFileSelect, false);
  6.  } else {
  7.      window.alert("本ブラウザではFile APIが使えません");
  8.     }
  9. }
  10.  
  11. function handleFileSelect(event) {
  12.  var files = event.target.files; // FileList object
  13.     for(var i=0; i< files.length; i++) {
  14.   var f = files[i];
  15.   // FileReaderオブジェクトの生成
  16.   var reader = new FileReader();
  17.   // エラー発生時の処理
  18.   reader.onerror = function (evt) {
  19.    disp.innerHTML = "読み取り時にエラーが発生しました。";
  20.   }
  21.   if (f.type.match('image.*')) {
  22.          reader.onload = function (evt) {
  23.            var img = document.createElement('img');
  24.            img.src = evt.target.result;
  25.            disp.appendChild(img);
  26.          }
  27.          // readAsDataURLメソッドでファイルの内容を取得
  28.          reader.readAsDataURL(f);
  29.   } else {
  30.    // ファイル読取が完了した際に呼ばれる処理
  31.    reader.onload = function (evt) {
  32.     var content = reader.result.replace(/</g,'<')
  33.     disp.innerHTML = content;
  34.    }
  35.    // readAsTextメソッドでファイルの内容を取得
  36.    reader.readAsText(f, 'utf-8');
  37.   }
  38.     }
  39.  
  40. }

参考にしたページ





以上





投稿者 時刻:
ラベル: