HTML5 ファイル 読み込み

こんにちわ。
職人見習いの小森です。

今回は、HTML5のファイル読み込みをについてまとめます。

○index.html

 id="fileinfo" 
 id="Contents" 

accept=”text/*”

上記を付けて、ファイル選択ボタンはテキストのみ選択可としています。

○file.js

window.addEventListener("load",function(){
    if(!window.file){
        ele.innerHTML = "File APIが使用できません"
        return;
    }
    var ele = document.getElementById("fileinfo");

    document.getElementById("read").addEventListner("click",function(){
       var textFile = document.getElementById("filedata").files[0];

       if(textFile.type.indexOf("text/") != 0 ){
          ele.innerHTML += "ファイルはテキストではない"; 
          return;
       }

       var reader;
       reader = new FileReader();

       reader.onload = function(evt){
          var text = evt.target.result;
          document.getElementById("Contents").textContent = text;
       }

       reader.onerror = function(evt){
          var errorNo = evt.target.error.code;
          ele.innerHTML += "エラー："+errorNo;
       }


       reader.onprogress = function(evt){
         //読み込み作業中のイベント
       }

       reader.onloadend = function(evt){
        //読み込み完了時のイベント
       }

　　　 reader.readAsText(textFile,"utf-8");

    },true);

},true);

readAsTextメソッドは、非同期でファイルの読み込みを行います。
そのため、ファイルの読み込みが完了してから処理したい場合などは、onloadendメソッドに読み込み完了後の処理を記述します。

読み込み処理中にエラーが発生した場合、onerrorメソッドが呼び出されエラーコードが表示されます。

※この記事は、なかの人（spitz8008）が書いています。