javascript - 如何使用javascript中的浏览按钮读取所选文件的内容

Question

我已使用浏览文件

      <input id="files" type="file" multiple/>
              <output id="result1"></output>

为了读取我所使用的浏览文件的内容

    window.onload = function(){

    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");
        //console.log(filesInput);
        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output1 = document.getElementById("result1");

            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];

                 var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var div1 = document.createElement("div1");

                  /*  div1.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/>";*/


         valid1(picFile.result);

                });

                 //Read the data
                picReader.readAsDataURL(file);
            }                               

        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}

这里我将读取的内容传递给函数 valid1()。这段代码的问题是，一旦我浏览文件，由于 window.onload 函数，它的内容就会被自动读取。

有人可以建议我如何修改相同的函数，以便删除 onload 部分并替换为 onclick 函数..以便单击按钮时应使用 filereader.readasdataurl 读取内容() 而不是使用 window.onload() 自动读取。我无法直接执行此操作，因为必须相应地更改事件监听器...任何人都可以帮我解决这个问题...

Answer 1

var btn = document.getElementById('my-button-id');

btn.onclick = function(){
    // same as before
}