使用Javascript打印多個html文件的輸出

我試圖在html中打印文本多個文件。我成功地打印了單個文件。但是我無法打印多個文件的文本輸出。能否請你幫我糾正代碼？`使用Javascript打印多個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>`

來源

2016-02-22 Karthik Hegde

有無需在提供的代碼段中使用closure。正如gurvinder建議，使用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/

來源

2016-02-22 06:25:18 Rayon

非常感謝。 :) –

樂意幫忙！請[accept and up-vote]（http://meta.stackexchange.com/questions/23138/how-to-accept-the-answer-on-stack-overflow）解決目的的最佳解決方案:) __快樂編碼！__ – Rayon

只需更換displayContents方法

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

，因爲它需要附加的文件，而不是替換最後一個

來源

2016-02-22 06:09:14 gurvinder372

仍然是同樣的問題。它只顯示上傳文件的數量 –

您可以在調用displayContents方法檢查是否已通過正確的值之前放置console.log或alert。 – gurvinder372

使用Javascript打印多個html文件的輸出

回答

相關問題