逐行輸出一個.txt檔案的內容

我創建了一個程式，用戶上傳了一個.txt檔案。 現在我想創建一個按鈕，我點擊它，它就會顯示.txt檔案的內容，**逐行顯示，中間有一點延遲**

。

document.getElementById('inputfile')
  .addEventListener('change', function() {

    var fr = new FileReader() 。
    fr.onload = function（） {
      document.getElementById('output')
        .textContent = fr.result。
    }

    fr.readAsText（this.files[0]）。
  })

< input type="file" name="inputfile"/span> id="inputfile"/span>> 
<br> 
<pre id="output"/span>> </pre>

。 <iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

我用ul代替，你可以玩玩。

。

document.getElementById('inputfile')
    .addEventListener('change', function() {
        var fr = new FileReader() 。
        const output = document.getElementById('output') 。
        fr.onload = function（） {
            const lines = fr.result.split（'
'）。)
            lines.forEach((line) =>  {
                var li = document.createElement("li") 。
                li.appendChild(document.createTextNode(line)
                output.appendChild（li）。
            });
        }
        fr.readAsText(this.files[0] ）。)
    })

< input type="file" name="inputfile"/span> id="inputfile"/span>> 
<br> 
<ul id="output"/span>> </ul>

。 <iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

你可以通過撰寫一個方法來完成這個作業，每次添加一行，并有一個間隔：

const displayLines = （elem, text, delay） =>{ 讓lineNo = 0; const lines = text.split(" "）。) const intervalId = setInterval( () => { elem.textContent = (lines[lineNo ] " "）。) if(lines.length == lineNo) clearInterval（intervalId）。 },delay)。 }

然后從onload呼叫這個。實體如下：

。

document.getElementById('inputfile')
  .addEventListener('change', function() {

    var fr = new FileReader() 。
    fr.onload = function（） {
      displayLines(document. getElementById('output'), fr.result, 1000）。)
    }

    fr.readAsText(this.files[0] ）。)
  })
  
  
const displayLines = （elem, text, delay）=>{
  let lineNo = 0;
  const lines = text.split（"
"）。)
  const intervalId = setInterval( ( ) => {
      elem.textContent  =（lines[lineNo  ]   "
"）。)
      if(lines.length ==lineNo)
          clearInterval（intervalId）。
  },delay)。
}

< input type="file" name="inputfile" id="inputfile"> 
<br> 
<pre id="output"/span>> </pre>

。 <iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

document.getElementById('inputfile')
    .addEventListener('change', function() {

        var fr = new FileReader() 。
        fr.onload = function（） {
            if (!fr.result) { // if empty result do not execute below code.
                return;
            }
            const resultAsArray = fr.result.split（'
'); //將文本按新行分割成陣列(
)
            let index = 0; // take the first line.
            const displayInterval = setInterval(() => { //創建一個每1秒執行一次的間隔。
                if (index === (resultAsArray.length - 1) { //檢查當前索引是否等于最后一個專案的索引。
                    clearInterval(displayInterval); //如果為真，退出區間。
                     return;
                }
                let html$ = document.getElementById('output') 。 innerHTML; // capture previous html.
                html$  = '<div>'   resultAsArray[index]   '</div>'; //將新行資料追加到之前的html。
                document.getElementById('output') 。 innerHTML = html$; //顯示資料到輸出元素。
                index  ; //為下一行增量。

            }, 1000）。)

        }

        fr.readAsText(this.files[0] ）。)

    })

< input type="file"/span> name="inputfile"id="inputfile">>
<br>/span>

<div id="output"/span>> </div> 

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

測驗text.txt檔案內容

lorem ipsum 生成器。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/333287.html

標籤：

上一篇：如何在visualstudio代碼中改變python的模塊路徑

下一篇：如何使用ReactJS將URL插入到文本區？