[JSステップ]HTML 5のファイル操作(file)

5090 ワード

前言
HTMLドキュメントにタグが表示されるたびに、FileUploadオブジェクトが作成されます.
この要素には、ファイル名を入力するテキスト入力フィールドと、ファイル選択ダイアログボックスを開いて選択ファイルをグラフィック化するボタンがあります.
この要素のvalueプロパティには、ユーザーが指定したファイルの名前が保存されますが、file-upload要素を含むフォームがコミットされると、ブラウザはファイル名だけでなく、選択したファイルの内容をサーバに送信します.ユーザーがファイル名を選択または編集すると、file-upload要素はonchangeイベントハンドルをトリガーします.
簡単な例を見てみましょう.

<!-- oscar999  -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="author" content="oscar999">
  <title></title>
  <script>
  function  handleFiles(files)
  {
    if(files.length)
    {
       var file = files[0];
       var reader = new FileReader();
       reader.onload = function()
       {
           document.getElementById("filecontent").innerHTML = this.result;
       };
       reader.readAsText(file);
    }
  }
  </script>
  
  </head>
  <body>

  <input type="file" id="file" onchange="handleFiles(this.files)"/>
  <div id="filecontent"></div>
  </body>
</html>

ここでファイルが読み込まれ、divに表示されます.
(IE 8では無効です.this.filesではファイルを読み込めません.これはhtml 5の特性です)
ファイルを選択すると、そのファイルを含むリスト(FileListオブジェクト)がパラメータとしてhandleFiles()関数に渡されます.このFileListオブジェクトは配列に似ていて、ファイルの数がわかりますが、その要素はFileオブジェクトです.このFileオブジェクトからname、size、lastModifiedDate、typeなどのプロパティを取得できます.このFileオブジェクトをFileReaderオブジェクトに渡す読み方で、ファイルを読み取ることができます.
HTML5 Drag and Drop File
HTML 5でサポートされているFileの操作はファイルの選択だけでなく、
HTML 5の前にAppletやSilverLightを使うことで達成できるファイルドラッグ機能は、HTML 5でも簡単に実現できますし、
コードを見てください:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="author" content="oscar999">
  <title></title>
  </head>
  <body>
    <div id="dropbox"> Drop Here </div>
    <div id="filecontent"></div>
    <script>
      var dropbox = document.getElementById("dropbox");  
      dropbox.addEventListener("dragenter", dragenter, false);  
      dropbox.addEventListener("dragover", dragover, false);  
      dropbox.addEventListener("drop", drop, false);   

    function dragenter(e) {  
        e.stopPropagation();  
        e.preventDefault();  
    }  

    function dragover(e) {  
        e.stopPropagation();  
        e.preventDefault();  
    }

    function drop(e) {  
        e.stopPropagation();  
        e.preventDefault();   
        var dt = e.dataTransfer;  
        var files = dt.files;
        if(files.length)
        {
           var file = files[0];
           var reader = new FileReader();
           reader.onload = function()
           {
               document.getElementById("filecontent").innerHTML = this.result;
           };
           reader.readAsText(file);
        }
    } 
          
    </script>
  </body>
</html>

ここでは、イベントオブジェクトのdataTransferによってファイルを得ることができる.
ファイルの内容を読み込む
最初の例では、FileReaderクラスを使用してファイルの内容を読み取ります.
W 3 Cドラフトでは、Fileオブジェクトにはファイル名、ファイルタイプなどの読み取り専用属性のみが含まれます.FileReaderは、コンテンツの読み取りと読み取りステータスの監視に使用します.
(firefoxではvar fileBinary=file.getAsBinary()を直接使用できます.ファイルのバイナリソースを読み込む)
FileReaderが提供する方法は、次のとおりです.
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
以下に、FileReaderを用いてユーザが選択したピクチャをバックグラウンドを介さずに即座に表示する例を示す.

function handleFiles(files){
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        
        if (!file.type.match(imageType)) {
            continue;
        }
        
        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        preview.appendChild(img);
        
        var reader = new FileReader();
        reader.onload = (function(aImg){
            return function(e){
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
}

バックエンドとのインタラクションは一般的なHTMLでは,file inputをformに置き,POST方式でファイルをバックエンドに渡す.
HTML 5では、FileReaderのreadAsBinaryStringメソッドでファイルのバイナリコードを読み込み、XMLHttpRequestのsendAsBinaryメソッドで送信することもできます.

var xhr = new XMLHttpRequest();
xhr.open("POST", "url");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
xhr.sendAsBinary(binaryString);
  
リファレンス W3C File API 
   MDC File 
  
ブラウザサポートはFirefox 3.6+,Chrome,  は のHTML 5インタフェースをサポートするブラウザに  され、IE 8および  のバージョンにはまったく  されません.

Nodejsチュートリアルの入門

HTML 5に追加されたマスター構造要素