ファイルの読み込みに失敗したときのエラー処理について解説

HOME
更新日:2017.03.02
HOMEJavaScript入門(HTML5編) > ファイル読込のエラー処理

ファイル読込のエラー処理-JavaScript入門(HTML5編)

ファイルの読み込みに失敗した場合、そのことを何らかの方法で知らせてあげなければ、 ユーザーは気付きません。ここではエラーが出た場合にinnerHTMLで知らせる方法を見ていきます。

読込時のエラー処理

読込エラーには何種類かありますが、 それらを調べるにはerrorイベントでFileReaderのerror.codeを参照します。 error.codeには以下のような種類があります。

1NOT_FOUND_ERRファイルが見つからない
2SECURITY_ERRセキュリティエラー
3ABORT_ERRファイルの読み込みが中断された
4NOT_READABLE_ERRファイルの読み込み権限がない
5ENCODING_ERRサイズ制限を越えた

error.code[1]ならばNOT_FOUND_ERR、ファイルが見つからないということになります。

エラー処理のサンプルスクリプト

以下は、前のページのスクリプトにエラー処理を加えてみたものです。 残念ながらエラーを出す方法を思いつかなかったので、スクリプトが動くか検証できていません。 取り敢えず参考にしてみてください。

<form name="test">
<input type="file" id="selfile"><br>
<div id="errmessage"></div>
<textarea name="txt" rows="10" cols="50" readonly></textarea>
</form>

<script>
var obj1 = document.getElementById("selfile");

obj1.addEventListener("change",function(evt){

  var file = evt.target.files;
  var reader = new FileReader();
  reader.readAsText(file[0]);
  
  reader.onload = function(ev){
    document.test.txt.value = reader.result;
  }

  //エラー処理
  reader.onerror = function(e){
    //エラーメッセージを配列に格納する
    var errmes = new Array(
    "",
    "ファイルが見つかりません!",
    "セキュリティエラーが検出されました!",
    "ファイルの読込が中断されました!",
    "ファイルの読み込み権限がありません!",
    "ファイルサイズが大き過ぎます!"
    );
    //エラーをinnerHTMLで書き出す
    var obj2 = document.getElementById("errmessage");
    obj2.innerHTML = errmes[reader.error.code];
  }

},false);
</script>

変更した部分はHTML部分にエラーメッセージを表示するdivタグを設けたことと、errorイベントを追加したことです。 errorイベント部分を詳しく見てみましょう。

errorイベント

reader.onerror = function(e){

}

エラーが出た場合は、errorイベントが発動します。上記のようにerrorイベントハンドラを記述していきます。 エラー関数の引数eは、お決まりみたいなものなので、記述しておきます。

エラーメッセージを配列に格納する

var errmes = new Array(
"",
"ファイルが見つかりません!",
"セキュリティエラーが検出されました!",
"ファイルの読込が中断されました!",
"ファイルの読み込み権限がありません!",
"ファイルサイズが大き過ぎます!"
);

次に配列errmesを宣言しています。error.codeに対応するメッセージを格納します。 0は無いので空にし、1から順にメッセージを記述しています。

if文やswitch文を使って各メッセージを振り分ける方法もあります。 個人的には配列が一番簡単に記述できるような気がしますが、 全てのメッセージを表示しなくても良ければif文やswitch文も効果的でしょう。

エラーをinnerHTMLで書き出す

var obj2 = document.getElementById("errmessage");
obj2.innerHTML = errmes[reader.error.code];

最後に、エラーメッセージを書き出すdivタグをgetElementByIdで取得して変数obj2に格納し、 innerHTMLで書き出します。書き出し文字列は配列errmesの該当要素です。 と言うことで配列のカッコ内は、FileReader.error.codeにします。