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

Question

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

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

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

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

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

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);
}

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

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);
}

Comments

[mee12]

質問を修正済み

Answer 1

    let input = document.createElement("input");

この要素を、ページのどこかに繋げないとファイル選択ダイアログは開けません。例: document.body.appendChild(input);

    // イベント発火
    let event = new Event("click");
    input.dispatchEvent(event);

input.click() でいいです。
このコードがある buttonClicked()という関数がユーザによるマウスクリックなどを起点として実行されるなら、input.click() でファイル選択ダイアログを開けます。ページロード時に呼ばれるとかタイマーで呼ばれるなど、ユーザの行動から呼ばれるものではない場合、ファイル選択ダイアログは開けません。

Comments

[mee12]

ご回答ありがとうございます。　まずbodyに追加しないと動かないですよね。
eventの使い方もご丁寧に教えて頂きありがとうございます。
この方法でできそうですね。
教えて頂いた方法で実行できるか試します。　もう少々お待ちください。

[mee12]

イベント発火も教えて頂いた方法でできました。ありがとうございます。
シンプルにclickでいいですね。

htmlは要素があれば、毎回removeしないとどんどん増えていってしまうため、削除するように追加しました。
動作はしているようなのですが、もう少し検証してみます。
--
let id = document.getElementById("file");
id ? id.remove() : "";
--

あとはFileReaderまわりの間違いを修正し、動作させることができました。

ありがとうございました。

Answer 2

buttonClicked()の呼び出し方次第でしょうね
無手順でファイルダイアログを出そうとしても無理ですがクリック自体は認識されます
ユーザー側の任意の処理で呼び出せばダイアログは表示されます

<script>
function buttonClicked(){
  if(document.querySelector('#myfile')) myfile.remove();
  const fileElement = document.createElement("input");
  fileElement.type="file";
  fileElement.id="myfile";
  fileElement.setAttribute('hidden',1);
  fileElement.addEventListener('click',()=>alert('file'));
  document.body.appendChild(fileElement);
  fileElement.click();
}
window.addEventListener('DOMContentLoaded', ()=>{
  buttonClicked();
});
</script>
<input type="button" value="btn" onclick="buttonClicked()">

※微調整

• 過去の質問：55348

Comments

[mee12]

ご回答ありがとうございます。　まずbodyに追加しないと動かないことがわかりました。
教えて頂いた方法で実行できるか試します。

[mee12]

イベント実行はint32_tさんの　input.click()　を使い、
input type="file"の非表示は、yambejpさんの方法を使いました。
教えて頂きありがとうございました。