Q&A
前提・実現したいこと
JavscriptのXMLHttpRequestを使用してローカルにあるXMLファイルの読み込みがしたいです。
操作としては、ローカルにあるXMLファイルを選択してもらい、そのファイルを読み込んだ後に、
データをAjax通信で渡して通信先の処理で使用したいです。
お力を貸してください。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> 6 <title>XML</title> 7 <script type="text/javascript" src="./js/jquery-1.11.1.js"></script> 8 </head> 9 <body> 10 <table> 11 <tr> 12 <th>XMLファイル</th> 13 <td><input type="file" id="sFile" accept=".xml" /></td> 14 </tr> 15 </table> 16 <input type="button" id="btnReadFile" value="データ読込" /> 17 </body> 18 <script src="./js/data.js"></script> 19</html>
Javascript
1$('#btnReadFile').on('click', function() { 2 3 // XMLファイルの情報取得 4 var sFile = document.querySelector('#sFile'); 5 6 // xmlファイルの読み込み 7 var xmlHttp = new XMLHttpRequest(); 8 9 xmlHttp.onreadystatechange = function() { 10 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 11 var ele = xmlHttp.responseXML.documentElement; 12 var eData = ele.getElementsByTagName('item')[0]; 13 14 $.ajax({ 15 type: 'POST', 16 url: '../App/upd_stop_info.php', 17 data: { 18 data : eData 19 }, 20 dataType: 'json', 21 timeout: 3000, 22 }) 23 .done( 24 // 通信成功時 25 function (data) { 26 if (0 < data.res) { 27 alert('データを読み込みました。'); 28 } else { 29 alert('データの読み込みに失敗しました。'); 30 } 31 }).fail( 32 function (XMLHttpRequest, textStatus, errorThrown) { 33 alert('通信エラーが発生しました。'); 34 } 35 ); 36 } 37 } 38 39 xmlHttp.open('GET', sFile.value); 40 xmlHttp.send(); 41});
XML
1<?xml version="1.0" encoding="utf-8"?> 2<Items> 3 <Item>りんご、みかん、すいか</Item> 4</Items> 5 6
試したこと
サーバー上に仮のファイルを置いてそのパスを指定すれば問題なく読み込めるため、
type="file"から取得したデータの処理が誤っていることが分かっております。
回答1件
0
ベストアンサー
JavscriptのXMLHttpRequestを使用してローカルにあるXMLファイルの読み込みがしたいです。
ローカルファイルをXHRで読み込むことはできません。
提示されているようにローカルファイルのXMLのDOM要素が欲しいとすると、FileReader でファイルを読んで文字列化して、DOMParser でXMLのパーズをします。
ただ、$.ajax() の送信部でDOM要素をdata: eData として指定していますが、本当は何を送りたいのか意図がよくわかりません。
投稿2021/03/24 13:49
総合スコア21679
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/25 00:06
2021/03/25 08:51