在 Javascript 中打印多个 html 文件的输出

Printing output of multiple html files in Javascript

本文关键字：html 文件 输出 Javascript 打印      更新时间：2023-09-26

我正在尝试以html格式打印文本多个文件。我成功地打印了单个文件。但是我无法打印多个文件的文本输出。你能帮我纠正代码吗？

<!DOCTYPE html>
<html>
<body>
<h1> Testing programs </h1>
<input type="file" id="fileinput" multiple />
<pre id="file-content"></pre>
<h3>Contents of the file:</h3>
<script type="text/javascript">
  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 
    if (!files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
                    displayContents(contents);
                };
            });
            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
    function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.innerHTML = contents;
  }
   document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false)
</script>
</body>
</html>`

无需在提供的代码段中使用closure。正如古尔文德所建议的，使用innerHTML +=

if条件应该像if (files)一样，因为如果文件长度大于 0

试试这个：

function readMultipleFiles(evt) {
  var files = evt.target.files;
  if (files) {
    for (var i = 0; i < files.length; i++) {
      var r = new FileReader();
      r.onload = function(e) {
        var contents = e.target.result;
        displayContents(contents);
      };
      r.readAsText(files[i]);
    }
  } else {
    alert("Failed to load files");
  }
}
function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.innerHTML += contents;
}
document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
<h1> Testing programs </h1>
<input type="file" id="fileinput" multiple />
<pre id="file-content"></pre>
<h3>Contents of the file:</h3>

另请参阅此小提琴：https://jsfiddle.net/rayon_1990/2cwr4c00/

只需将displayContents方法替换为

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.innerHTML += contents; //observe + before =
}

因为它需要附加文件而不是替换最后一个文件

相关文章：