JavascriptでローカルにあるXMLファイルを読み込みたい

前提・実現したいこと

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件

ベストアンサー

JavscriptのXMLHttpRequestを使用してローカルにあるXMLファイルの読み込みがしたいです。

ローカルファイルをXHRで読み込むことはできません。
提示されているようにローカルファイルのXMLのDOM要素が欲しいとすると、FileReader でファイルを読んで文字列化して、DOMParser でXMLのパーズをします。

ただ、$.ajax() の送信部でDOM要素をdata: eData として指定していますが、本当は何を送りたいのか意図がよくわかりません。

投稿2021/03/24 13:49

int32_t

総合スコア20832

entaro12345

2021/03/25 00:06

ご回答ありがとうございます。やはりローカルのファイルをXHRで読み込むことはできないんですね。頂いた情報で試してみます。

entaro12345

2021/03/25 08:51

頂いた回答通り、FileReaderで読み込んでその後、DOMParserを使用することでやりたいことができました。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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