質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.65%

FileAPIとFileReaderのIEへの対応の方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 232

newstg

score 8

実現したい事

読み込んだテキストファイルをinput要素として取得・表示させたいと考えております。

IE11での動作確認をしたところ、ファイル選択は出来るのですが、input要素として表示されません。
設定してあるアラートも表示されません。
chromeとedgeでは動作確認がとれましたのでロジックに関しての問題はなさそうだと考えているのですが、抜けがあるのでしょうか。
OSはwindows10と7両方で試しましたが、同じ結果となりました。

FileAPIとFileReaderはIE10以降であれば動作するという認識は間違いでしょうか。
どなたかご教示ください。

該当のプログラム

<!DOCTYPE html>

<html>

<head>
<title>Test</title>
<meta http-equiv="content-type" charset="utf-8">
</head>
<body>
<p><input type="file" name="select" id="loadBtn" /></p>
<table>
<tbody>
    <tr>
     <th>
    【氏名】
     <img class="">
     </th>
     <td>
   <span><input size="30" type="text" name="name" id="element0" required="required" title="入力内容をご確認ください"></span>
     <span>[番号]<input size="20" type="text" name="cust" id="element1" required="required" title="入力内容をご確認ください"></span>
    </td>
    </tr>
    <tr>
    <th>
    </tbody>
    </table>
</body>
</html>
var loadBtn = document.querySelector("#loadBtn");
loadBtn.addEventListener('change', upload, false);

function upload(evt) {

        if (!isFileUpload()) {
                alert("FileAPI非対応のブラウザです。");
        } else {
                var data = null;

                var file = evt.target.files[0];

                var reader = new FileReader();

                reader.readAsText(file);
                reader.onload = function(event) {
                        var result = event.target.result;
                        arr = result.split(/\r\n|\r|\n/);
                        var i = 0;
                        arr.forEach((val) => {
                            document.getElementById("element"+i).value = val;
                            i += 1;
                        });
                };
                reader.onerror = function() {
                        alert("ファイルをロードできません。");
                };
        }
}

function isFileUpload() {
           var isCompatible = false;
           if (window.File && window.FileReader && window.FileList && window.Blob) {
           isCompatible = true;
           }
           return isCompatible;
}

環境

Windows10/7

IE11
chrome 78.0.3904.97

追記

ご質問にありました出典元は
https://developer.mozilla.org/ja/docs/Web/API/FileReader

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/11/12 23:39

    質問本文に追記してください

    キャンセル

  • Y.H.

    2019/11/13 09:27

    > IE10以降であれば動作するという認識
    互換表示モードで表示されてたりしないですか?
    IE11でそのページ表示時、ドキュメントモードは何で表示してますか?

    キャンセル

  • newstg

    2019/11/13 22:59

    互換表示なしで表示しております。
    なお、今回は他の方にご指摘いただきましたコールバックにアロー関数が原因だったようです。
    ですが、互換表示の有無による表示の変化という知見を手に入れることができました。
    ありがとうございました。

    キャンセル

回答 1

checkベストアンサー

+2

IEは10以上ですね、ただIEはFormDataの実装が不十分なので苦労するかもしれません
ブラウザ間の差異を埋めたいならjQueryなど利用する方が楽だと思います

なおご提示のソースはコールバックにアロー関数を使っているのがIE非対応です

arr.forEach((val)=>{
↓↓↓
arr.forEach(function(val){

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/13 23:02

    ご指摘ありがとうございます。
    おかげさまで無事解決いたしました。
    chromeとedgeで動くが、ie11では動かないというところから、より新しい書き方には対応していないということを連想できればよかったのかもしれません。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる