html如何等待文件传入后再执行js代码

问题遇到的现象和发生背景

我需要在一个页面内插入一个文件，并用js代码处理这个文件，由于代码必须要浏览器才能处理。
尝试用sleep()函数，但会导致等待对应时长后才加载页面，而不是加载页面完成后等待对应时长再执行sleep()之后的代码。
现在它一直报错

Uncaught TypeError: Cannot set properties of null (setting 'onchange')

全代码：

<html>
<meta charset="utf-8">
<title>TEMP PAGEtitle>
<head>
    <style>
        h1 {font-size: 36px;}
        p {font-size: 25px;}
        h2 {font-size: 14px;}
        p.sansserif {font-family: "Microsoft YaHei";}
    style>
head>
<body>
    <p class="sansserif">首先，请点击下方按钮，并选择打开.exe显示的文件。p>
    <input name="file" id="input" type="file">
    <button id="button">保存长度信息button>
body>
<script>
    /* 创建一些数组 */
    window.addEventListener('load', function () {
        var text = new Array();
        var width = new Array();
        var height = new Array();
        function sleep(d) {
            for (var t = Date.now(); Date.now() - t <= d;);
        }

        sleep(10000);

        document.getElementById('file').onchange = function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function (progressEvent) {
                var fileContentArray = this.result.split(/\r\n|\n/);
                var line = lines[0];
                console.log(lines[0]);
                for (var line = 0; line < lines.length - 1; line++) {
                    console.log(line + " --> " + lines[line]);
                }
            };
            reader.readAsText(file);
        };
    });
    /*for (i = 0; i < line; i++) {
        let spanDom = document.createElement("span");
        spanDom.style.fontSize = "25";
        spanDom.style.opacity = "0";
        spanDom.innerHTML = "Hello World!";
        spanDom.style.fontFamily = "Microsoft YaHei";
        document.body.append(spanDom);
        let size = {};
        size = spanDom.getBoundingClientRect();
        spanDom.remove();
        console.log(size);
        console.log(size.height);
        console.log(size.width);
    }*/
script>
html>

另外，可以通过c++程序向浏览器的js传入信息吗？是chrome浏览器。
处理完后能直接保存到对应位置吗？还是必须通过下载文件的方式？

答案引用CHATGPT 如果有帮助请点个采纳
如果想等待文件传入后再执行 JavaScript 代码，可以使用如下代码：

<input name="file" id="input" type="file">
<button id="button">保存长度信息</button>

<script>
  document.getElementById('input').addEventListener('change', function () {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function (progressEvent) {
      // 这里是文件加载完成后执行的代码
      // 读取文件内容并处理
      var fileContentArray = this.result.split(/\r\n|\n/);
      console.log(fileContentArray);
      // ...
    };
    reader.readAsText(file);
  });
</script>

因为使用 FileReader 的读取是异步的，所以必须等到文件读取完成后再执行其他操作。

关于第二个问题，Chrome 浏览器限制了在网页中直接操作本地文件，如果想要处理完后直接保存到对应位置，可以通过将文件以数据的形式传递到后台程序处理，然后再从后台程序保存到本地。

试试这个

img

具体访问链接是这个 https://www.runoob.com/jsref/event-onload.html