javascript - 如何读取文件的内容并将其附加到字符串中，然后将其添加到 html 中？

Question

我正在尝试这个:

    for (var i = 0; i < nFiles; i++) {
        datos += "<pre>Archivo " + (i+1) +": "+ files[i].name  + "  Tamaño: " + files[i].size +" bytes " + "  Tipo: " + files[i].type + "  Última modificación: " + files[i].lastModifiedDate+ "</pre>" ;
        var text = "test";
        if (files[i].type.match(/text.*/)) {
            var lector = new FileReader();
            lector.onload = function (evento) {
                text = lector.result;
          }      
        lector.readAsText(files[i]);
        datos += "<pre>" + text + "</pre>";
        }
        else {
            alert("Error : ¡¡¡ File not valid !!!");
        }
    }

document.getElementById("datos").innerHTML = datos;

但它总是在 HTML 中写入“test”。但是，文件中的其他属性会正确显示。我不确定读取文件时我做错了什么。请我需要帮助

Answer 1

固定答案:

必须确保在 lector 完成后附加 datos。因此，这一行应该位于“onload”事件处理程序内:

    if (files[i].type.match(/text.*/)) {
        let lector = new FileReader();
        lector.readAsText(files[i]);
        lector.onload = function (evento) {
            text = lector.result;
            datos += "<pre>" + text + "</pre>";
      }

但即便如此还不够。在原始代码中，页面元素的更新“不等待”这些“onload”事件发生，因此当前是在读取器结果应用于datos之前完成的。

解决此问题的最简单方法是在写入页面之前添加一点延迟，将最后一行更改为:

setTimeout(() => {
   document.getElementById("datos").innerHTML = datos;
}, 100)

其中 100 是在所有周期结束之前等待 100 毫秒。您可以尝试并让这个数字变得更小。

还应该使用 let lector = new FileReader(); 而不是 var lector = new FileReader();，否则当涉及到 行时>text = lector.result; 我们只会从最新文件中获得 lector 对象。

尝试一下。