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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

javasciptを使用して、input fileからローカルのCSVファイルを読み込みしたい。

mee12
mee12

総合スコア88

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

-1評価

0クリップ

309閲覧

投稿2022/06/08 01:58

編集2022/06/08 03:31

javasciptを使用して、input fileからローカルのCSVファイルを読み込みしたいです。

最初に、コードからcreateElementして、new Event("click")から、dispatchで発火したいのですが、うまくできませんでした。

eventが発火できないので、consoleには警告は出ずでした。

createElementについては、input type="file"で使えるかはわかっていないですが、
html側で作成する必要があるかもしれません。

どなたかわかるかたいらっしゃいましたらお願いします。

javascript

function buttonClicked() { // createElementでinput type="file"を使えるかはわかっていない let input = document.createElement("input"); input["type"] = "file"; input["accept"] = "text/csv"; // イベント発火 let event = new Event("click"); input.dispatchEvent(event); input.addEventListener("change", function (event) { if (event.target.files.length) { // 1つ目ファイル let file = event.target.files[0]; // 拡張子の確認 if (!file.type.match("*.csv")) { alert("csvファイルを選択して下さい。") return; } // FileReaderを作成 let fileReader = new FileReader(); // データ読み込み ※実際にはいろいろ文字列処理をしてから使う fileReader.onload = (() => { console.log(fileReader.result); ); } }, false); }

(追記)
教えて頂いた方法から、実際に動作できたコードを記載します。

javascript

buttonClicked() { let id = document.getElementById("file"); id ? id.remove() : ""; let input = document.createElement("input"); input["id"] = "file"; input["type"] = "file"; input["accept"] = "text/csv"; input.setAttribute("hidden", 1); document.body.appendChild(input); input.click(); input.addEventListener("change", (event) => { if (event.target.files.length) { // 1つ目ファイル let file = event.target.files[0]; // ファイルタイプの確認 if (!file.type.match("text/csv")) { alert("csvファイルを選択して下さい。") return; } // FileReaderを作成 let fileReader = new FileReader(); // CSVファイルを取得 fileReader.readAsText(file); // CSVファイルをロード fileReader.onload = (event) => { let text = event.target.result; // 1行ごとに配列にする let rows = text.split("\r\n"); // 配列の末尾がなければ削除 if (!rows.slice(-1)[0]) { rows.pop(); } // カンマでsplit let data = rows.map((currentValue) => { let row = currentValue.split(","); return row; }, []); // データ確認用 console.log(data); }; // エラー処理 fileReader.onerror = function () { alert("ファイルを読み込みできません。"); }; } }, false); }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

mee12

2022/06/08 02:13 編集

質問を修正済み

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。