如何使用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函数，它的内容就会被自动读取。

有人能建议我如何修改相同的函数，以便删除加载部分，代之以onclick函数。。因此，在单击按钮时，应该使用filereader.readasdataurl（）读取内容，而不是使用window.onload（）自动读取。我不能直接这样做，因为必须相应地更改事件侦听器。。。有人能帮我解决这个问题吗。。

Answer 1

var btn = document.getElementById('my-button-id');
btn.onclick = function(){
    // same as before
}

Answer 2

文件不是因为onload函数而读取的，而是因为"change"事件侦听器而读取的。

filesInput.addEventListener("change", function(event){

更改为：

**通过KWieiss的回答编辑**

var btn = document.getElementById('files');
btn.onclick = function() {
// your code here.
}

这将文件读取处理程序放置在按钮单击事件上。

Answer 3

将事件更改为按钮单击，并更改对文件的引用。

注意accept="image/*"，它可以帮助用户只选择图像（然而，浏览器不检查文件类型，只帮助选择文件）

看看这把小提琴https://jsfiddle.net/FranIg/azrbsgpe/

在您的HTML:中

<input id="files" type="file" multiple accept="image/*" />
<button type="button" id="btn">
Load</button>
</button>
<output id="result1"></output>

在您的脚本中：

window.onload = function(){
    if(window.File && window.FileList && window.FileReader)
    {
        var btnClick = document.getElementById("btn");
        //console.log(filesInput);
        btnClick.addEventListener("click", function(event){
            var files = document.getElementById("files").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");
    }
}