- HOME
- JavaScript入門[HTML5編]
- ファイル読込のエラー処理
ファイルの読み込みに失敗した場合、そのことを何らかの方法で知らせてあげなければ、 ユーザーは気付きません。ここではエラーが出た場合にinnerHTMLで知らせる方法を見ていきます。
読込時のエラー処理
読込エラーには何種類かありますが、 それらを調べるにはerrorイベントでFileReaderのerror.codeを参照します。 error.codeには以下のような種類があります。
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にします。