Q&A
>FileAPIとFileReaderはIE10以降であれば動作するという認識
出典を明示された方が良いかと思います。何もないと「根拠もなしにそう思っている」という印象になります。
実現したい事
読み込んだテキストファイルをinput要素として取得・表示させたいと考えております。
IE11での動作確認をしたところ、ファイル選択は出来るのですが、input要素として表示されません。
設定してあるアラートも表示されません。
chromeとedgeでは動作確認がとれましたのでロジックに関しての問題はなさそうだと考えているのですが、抜けがあるのでしょうか。
OSはwindows10と7両方で試しましたが、同じ結果となりました。
FileAPIとFileReaderはIE10以降であれば動作するという認識は間違いでしょうか。
どなたかご教示ください。
該当のプログラム
HTML
1<!DOCTYPE html> 2 3<html> 4 5<head> 6<title>Test</title> 7<meta http-equiv="content-type" charset="utf-8"> 8</head> 9<body> 10<p><input type="file" name="select" id="loadBtn" /></p> 11<table> 12<tbody> 13 <tr> 14 <th> 15 【氏名】 16 <img class=""> 17 </th> 18 <td> 19 <span><input size="30" type="text" name="name" id="element0" required="required" title="入力内容をご確認ください"></span> 20 <span>[番号]<input size="20" type="text" name="cust" id="element1" required="required" title="入力内容をご確認ください"></span> 21 </td> 22 </tr> 23 <tr> 24 <th> 25 </tbody> 26 </table> 27</body> 28</html>
javascript
1var loadBtn = document.querySelector("#loadBtn"); 2loadBtn.addEventListener('change', upload, false); 3 4function upload(evt) { 5 6 if (!isFileUpload()) { 7 alert("FileAPI非対応のブラウザです。"); 8 } else { 9 var data = null; 10 11 var file = evt.target.files[0]; 12 13 var reader = new FileReader(); 14 15 reader.readAsText(file); 16 reader.onload = function(event) { 17 var result = event.target.result; 18 arr = result.split(/\r\n|\r|\n/); 19 var i = 0; 20 arr.forEach((val) => { 21 document.getElementById("element"+i).value = val; 22 i += 1; 23 }); 24 }; 25 reader.onerror = function() { 26 alert("ファイルをロードできません。"); 27 }; 28 } 29} 30 31function isFileUpload() { 32 var isCompatible = false; 33 if (window.File && window.FileReader && window.FileList && window.Blob) { 34 isCompatible = true; 35 } 36 return isCompatible; 37} 38
環境
Windows10/7
IE11
chrome 78.0.3904.97
追記
ご質問にありました出典元は
https://developer.mozilla.org/ja/docs/Web/API/FileReader
> IE10以降であれば動作するという認識
互換表示モードで表示されてたりしないですか？
IE11でそのページ表示時、ドキュメントモードは何で表示してますか？
互換表示なしで表示しております。
なお、今回は他の方にご指摘いただきましたコールバックにアロー関数が原因だったようです。
ですが、互換表示の有無による表示の変化という知見を手に入れることができました。
ありがとうございました。
回答1件
0
ベストアンサー
IEは10以上ですね、ただIEはFormDataの実装が不十分なので苦労するかもしれません
ブラウザ間の差異を埋めたいならjQueryなど利用する方が楽だと思います
なおご提示のソースはコールバックにアロー関数を使っているのがIE非対応です
arr.forEach((val)=>{ ↓↓↓ arr.forEach(function(val){
投稿2019/11/13 00:36
総合スコア114839
ご指摘ありがとうございます。
おかげさまで無事解決いたしました。
chromeとedgeで動くが、ie11では動かないというところから、より新しい書き方には対応していないということを連想できればよかったのかもしれません。
ありがとうございました。
あなたの回答
tips
プレビュー
