用Javascript打印多个HTML文件的输出

Question

I am trying to print the text multiple files in html. 我正在尝试在HTML中打印文本多个文件。 I succeeded in printing the single file. 我成功打印了单个文件。 But I am unable to print the text output of a multiple files. 但是我无法打印多个文件的文本输出。 Can you please help me in correcting the code?` 您能帮我纠正代码吗？

<!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>`

Answer 1

just replace the displayContents method as 只需将displayContents方法替换为

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

since it needs to append the files rather than replace the last one 因为它需要附加文件而不是替换最后一个文件

Answer 2

There is no need to use closure in provided snippet. 无需在提供的代码段中使用closure 。 As suggested by gurvinder , use innerHTML += 根据gurvinder的建议，使用innerHTML +=

if condition should be like if (files) as it will be true if length of files is greater than 0 if条件应类似于if (files)因为如果文件长度大于0 ，则为true

Try this: 尝试这个：

 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>

Also refer this fiddle : https://jsfiddle.net/rayon_1990/2cwr4c00/ 另请参阅此提琴： https : //jsfiddle.net/rayon_1990/2cwr4c00/

用Javascript打印多个HTML文件的输出

问题描述

2 个解决方案

解决方案1
1 2016-02-22 06:09:14

解决方案2
1 已采纳 2016-02-22 06:25:18

用Javascript打印多个HTML文件的输出

问题描述

2 个解决方案

解决方案1 1 2016-02-22 06:09:14

解决方案2 1 已采纳 2016-02-22 06:25:18

解决方案1
1 2016-02-22 06:09:14

解决方案2
1 已采纳 2016-02-22 06:25:18