teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問javasciptを使用して、input fileからローカルのCSVファイルを読み込みしたい。

編集履歴

質問編集履歴

16

修正

2022/06/08 03:31

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -84,6 +84,11 @@
84
84
  // 1行ごとに配列にする
85
85
  let rows = text.split("\r\n");
86
86
 
87
+ // 配列の末尾がなければ削除
88
+ if (!rows.slice(-1)[0]) {
89
+ rows.pop();
90
+ }
91
+
87
92
  // カンマでsplit
88
93
  let data = rows.map((currentValue) => {
89
94
  let row = currentValue.split(",");
JavaScript

15

修正

2022/06/08 03:20

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -89,7 +89,8 @@
89
89
  let row = currentValue.split(",");
90
90
  return row;
91
91
  }, []);
92
+
92
-
93
+ // データ確認用
93
94
  console.log(data);
94
95
  };
95
96
 
JavaScript

14

修正

2022/06/08 03:19

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
  let text = event.target.result;
83
83
 
84
84
  // 1行ごとに配列にする
85
- let rows = text.split("\n");
85
+ let rows = text.split("\r\n");
86
86
 
87
87
  // カンマでsplit
88
88
  let data = rows.map((currentValue) => {
JavaScript

13

修正

2022/06/08 03:17

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -74,10 +74,10 @@
74
74
  // FileReaderを作成
75
75
  let fileReader = new FileReader();
76
76
 
77
- // ファイル読み取り
77
+ // CSVファイルを取得
78
78
  fileReader.readAsText(file);
79
79
 
80
- // CSVファイルを取得
80
+ // CSVファイルをロード
81
81
  fileReader.onload = (event) => {
82
82
  let text = event.target.result;
83
83
 
JavaScript

12

修正

2022/06/08 03:04

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  input.click();
62
62
 
63
- input.addEventListener("change", function (event) {
63
+ input.addEventListener("change", (event) => {
64
64
  if (event.target.files.length) {
65
65
  // 1つ目ファイル
66
66
  let file = event.target.files[0];
@@ -78,7 +78,7 @@
78
78
  fileReader.readAsText(file);
79
79
 
80
80
  // CSVファイルを取得
81
- fileReader.onload = function (event) {
81
+ fileReader.onload = (event) => {
82
82
  let text = event.target.result;
83
83
 
84
84
  // 1行ごとに配列にする
JavaScript

11

修正

2022/06/08 03:03

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -87,8 +87,8 @@
87
87
  // カンマでsplit
88
88
  let data = rows.map((currentValue) => {
89
89
  let row = currentValue.split(",");
90
- return row;
90
+ return row;
91
- }, []);
91
+ }, []);
92
92
 
93
93
  console.log(data);
94
94
  };
JavaScript

10

修正

2022/06/08 03:03

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -45,7 +45,7 @@
45
45
  ```
46
46
 
47
47
  (追記)
48
- 実際に動作させたコード
48
+ 教えて頂いた方法から、実際に動作できたコードを記載します。
49
49
  ```javascript
50
50
  buttonClicked() {
51
51
  let id = document.getElementById("file");
JavaScript

9

修正

2022/06/08 02:56

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -44,4 +44,60 @@
44
44
  }
45
45
  ```
46
46
 
47
+ (追記)
48
+ 実際に動作させたコード
49
+ ```javascript
50
+ buttonClicked() {
51
+ let id = document.getElementById("file");
52
+ id ? id.remove() : "";
47
53
 
54
+ let input = document.createElement("input");
55
+ input["id"] = "file";
56
+ input["type"] = "file";
57
+ input["accept"] = "text/csv";
58
+ input.setAttribute("hidden", 1);
59
+ document.body.appendChild(input);
60
+
61
+ input.click();
62
+
63
+ input.addEventListener("change", function (event) {
64
+ if (event.target.files.length) {
65
+ // 1つ目ファイル
66
+ let file = event.target.files[0];
67
+
68
+ // ファイルタイプの確認
69
+ if (!file.type.match("text/csv")) {
70
+ alert("csvファイルを選択して下さい。")
71
+ return;
72
+ }
73
+
74
+ // FileReaderを作成
75
+ let fileReader = new FileReader();
76
+
77
+ // ファイル読み取り
78
+ fileReader.readAsText(file);
79
+
80
+ // CSVファイルを取得
81
+ fileReader.onload = function (event) {
82
+ let text = event.target.result;
83
+
84
+ // 1行ごとに配列にする
85
+ let rows = text.split("\n");
86
+
87
+ // カンマでsplit
88
+ let data = rows.map((currentValue) => {
89
+ let row = currentValue.split(",");
90
+ return row;
91
+ }, []);
92
+
93
+ console.log(data);
94
+ };
95
+
96
+ // エラー処理
97
+ fileReader.onerror = function () {
98
+ alert("ファイルを読み込みできません。");
99
+ };
100
+ }
101
+ }, false);
102
+ }
103
+ ```
JavaScript

8

修正

2022/06/08 02:22

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -3,6 +3,10 @@
3
3
  最初に、コードからcreateElementして、new Event("click")から、dispatchで発火したいのですが、うまくできませんでした。
4
4
 
5
5
  eventが発火できないので、consoleには警告は出ずでした。
6
+
7
+ createElementについては、input type="file"で使えるかはわかっていないですが、
8
+ html側で作成する必要があるかもしれません。
9
+
6
10
 
7
11
  どなたかわかるかたいらっしゃいましたらお願いします。
8
12
 
JavaScript

7

修正

2022/06/08 02:19

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  ```javascript
10
10
  function buttonClicked() {
11
- // createElementでfileを使えるかはわかっていない
11
+ // createElementでinput type="file"を使えるかはわかっていない
12
12
  let input = document.createElement("input");
13
13
  input["type"] = "file";
14
14
  input["accept"] = "text/csv";
JavaScript

6

修正

2022/06/08 02:13

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -13,7 +13,7 @@
13
13
  input["type"] = "file";
14
14
  input["accept"] = "text/csv";
15
15
 
16
- // event発火
16
+ // イベント発火
17
17
  let event = new Event("click");
18
18
  input.dispatchEvent(event);
19
19
 
JavaScript

5

修正

2022/06/08 02:12

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -18,25 +18,25 @@
18
18
  input.dispatchEvent(event);
19
19
 
20
20
  input.addEventListener("change", function (event) {
21
- if (event.target.files.length) {
21
+ if (event.target.files.length) {
22
- // 1つ目ファイル
22
+ // 1つ目ファイル
23
- let file = event.target.files[0];
23
+ let file = event.target.files[0];
24
24
 
25
- // 拡張子の確認
25
+ // 拡張子の確認
26
- if (!file.type.match("*.csv")) {
26
+ if (!file.type.match("*.csv")) {
27
- alert("csvファイルを選択して下さい。")
27
+ alert("csvファイルを選択して下さい。")
28
- return;
28
+ return;
29
- }
29
+ }
30
30
 
31
- // FileReaderを作成
31
+ // FileReaderを作成
32
- let fileReader = new FileReader();
32
+ let fileReader = new FileReader();
33
33
 
34
- // データ読み込み　※実際にはいろいろ文字列処理をしてから使う
34
+ // データ読み込み　※実際にはいろいろ文字列処理をしてから使う
35
- fileReader.onload = (() => {
35
+ fileReader.onload = (() => {
36
- console.log(fileReader.result);
36
+ console.log(fileReader.result);
37
- });
37
+ );
38
- }
38
+ }
39
- }, false);
39
+ }, false);
40
40
  }
41
41
  ```
42
42
 
JavaScript

4

修正

2022/06/08 02:12

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -9,33 +9,34 @@
9
9
  ```javascript
10
10
  function buttonClicked() {
11
11
  // createElementでfileを使えるかはわかっていない
12
- let fileElement = document.createElement("file");
12
+ let input = document.createElement("input");
13
+ input["type"] = "file";
13
- fileElement["accept"] = "text/csv";
14
+ input["accept"] = "text/csv";
14
-
15
+
15
- // click eventを発火　※動かなかった
16
+ // event発火
16
17
  let event = new Event("click");
17
- fileElement.dispatchEvent(event);
18
+ input.dispatchEvent(event);
18
19
 
19
- fileElement.addEventListener("change", function (event) {
20
+ input.addEventListener("change", function (event) {
20
- if (event.target.files.length) {
21
+ if (event.target.files.length) {
21
- // 1つ目ファイル
22
+ // 1つ目ファイル
22
- let file = event.target.files[0];
23
+ let file = event.target.files[0];
23
24
 
24
- // 拡張子の確認
25
+ // 拡張子の確認
25
- if (!file.type.match("*.csv")) {
26
+ if (!file.type.match("*.csv")) {
26
- alert("csvファイルを選択して下さい。")
27
+ alert("csvファイルを選択して下さい。")
27
- return;
28
+ return;
28
- }
29
+ }
29
30
 
30
- // FileReaderを作成
31
+ // FileReaderを作成
31
- let fileReader = new FileReader();
32
+ let fileReader = new FileReader();
32
33
 
33
- // データ読み込み　※実際にはいろいろ文字列処理をしてから使う
34
+ // データ読み込み　※実際にはいろいろ文字列処理をしてから使う
34
- fileReader.onload = (() => {
35
+ fileReader.onload = (() => {
35
36
  console.log(fileReader.result);
36
37
  });
37
- }
38
+ }
38
- }, false);
39
+ }, false);
39
40
  }
40
41
  ```
41
42
 
JavaScript

3

修正

2022/06/08 02:09

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,6 @@
1
1
  javasciptを使用して、input fileからローカルのCSVファイルを読み込みしたいです。
2
2
 
3
3
  最初に、コードからcreateElementして、new Event("click")から、dispatchで発火したいのですが、うまくできませんでした。
4
-
5
- →　間違いがあり見直し中 createElementはinputで、typeがファイルでしたので見直し中
6
4
 
7
5
  eventが発火できないので、consoleには警告は出ずでした。
8
6
 
JavaScript

2

修正

2022/06/08 02:08

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,8 @@
1
1
  javasciptを使用して、input fileからローカルのCSVファイルを読み込みしたいです。
2
2
 
3
3
  最初に、コードからcreateElementして、new Event("click")から、dispatchで発火したいのですが、うまくできませんでした。
4
+
5
+ →　間違いがあり見直し中 createElementはinputで、typeがファイルでしたので見直し中
4
6
 
5
7
  eventが発火できないので、consoleには警告は出ずでした。
6
8
 
JavaScript

1

修正

2022/06/08 02:00

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,8 @@
1
1
  javasciptを使用して、input fileからローカルのCSVファイルを読み込みしたいです。
2
2
 
3
3
  最初に、コードからcreateElementして、new Event("click")から、dispatchで発火したいのですが、うまくできませんでした。
4
+
5
+ eventが発火できないので、consoleには警告は出ずでした。
4
6
 
5
7
  どなたかわかるかたいらっしゃいましたらお願いします。
6
8
 
JavaScript