ファイルをアップロードするときに、js はどのようにファイルを読み取るのでしょうか?

1.アップロード機能の実現

最初のステップは、input タグを使用し、タイプを type="file" に設定することです。

2 番目のステップは、入力の変更イベントを設定し、応答のコールバック関数の target.file を通じてアップロードされたファイルを取得することです。

注: 入力のデフォルトのスタイルは醜いので、通常開発するときは入力ボタンを非表示にし、独自のボタンを作成します。設定したボタンをクリックするときは、デフォルトの入力をクリックするだけです。

2. アップロードされたファイルを読み取ります

この関数を実装するコア API は FileReader() です。

FileReader() をインスタンス化することで、アップロードされたファイルの特定のコンテンツを取得できます。
 reader.onload = function () {
                  console.log(reader.result,'reader');//文件结果
                }
                 reader.readAsText(File) //作为txt

3. 完全なコードデモ

テストのために直接開くことができます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" onchange="upload()"></input>
    <script>
    function upload(event) {
                var e = window.event||event;
                console.log(e)
                // 获取当前选中的文件
                var File = e.target.files[0];
                console.log(File,'获取当前选中的文件');//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了
                let reader = new FileReader()
                //将上传的文件读取成text
                reader.onload = function () {
                  console.log(reader.result,'reader');
                }
                 reader.readAsText(File)
            }
    </script>
  </body>
</html>

ファイルをアップロードするときに、js はどのようにファイルを読み取るのでしょうか?

1.アップロード機能の実現

2. アップロードされたファイルを読み取ります

3. 完全なコードデモ

おすすめ