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

Question

I have browsed for files using

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

Inorder to read the contents of the browsed file I have used

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

Here i am passing the contents read to a function valid1(). The issue with this code is that as soon as i browse the file, automatically its contents are read due to the window.onload function.

Can someone please suggest so as to how i can modify the same function so that the onload part is removed and instead is replaced by onclick function..so that on the click of a button the contents should be read using filereader.readasdataurl() instead of automatically being read using window.onload()..I can't do it directly because the eventlisteners have to be changed accordingly...can anyone help me out with this..

Answer 1

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

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

Answer 2

The file is not read because of the onload function, it's read because of the "change" event listener.

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

Change it to:

** edite via KWieiss's answer **

var btn = document.getElementById('files');

btn.onclick = function() {
// your code here.
}

This places the file read handler on the button click event.

Answer 3

Change the event to a button click, and change references to files.

Note the accept="image/*" , it could help to the user in selecting only images (however, the browser is not checking the file type, only help selecting a file)

See this fiddle https://jsfiddle.net/FranIg/azrbsgpe/

In your HTML:

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

In your script:

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