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（）自动读取..我无法直接执行，因为必须相应地更改eventlisteners ...任何人都可以帮助我...

Answer 1

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

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

Answer 2

由于onload功能而无法读取文件，因为＆＃34;更改＆＃34;事件监听。

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

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

3 个答案: