Javascript - 獲取用FileReader（）讀取的文件的格式預覽？

我試着實現一個拖動文件功能。我需要預覽文件的文本，在這裏是一個HTML文件。但是，當我將FileReader的結果插入到DOM中時，預覽會丟失所有換行符和文本縮進。Javascript - 獲取用FileReader（）讀取的文件的格式預覽？

我嘗試使用jQuery .split（）並插入<br/>，但文本仍然失去所有縮進。

for(var i = 0; i <files.length; i++){ 

    reader = new FileReader(); 
    reader.onload = function(evt){ 
     var r = evt.target.result; 

     r = r.replace(/>/g,'&gt; >'); 
     r = r.replace(/</g,'&lt;'); 
     r = r.split('>') 

     var text=""; 
     for(var i =0; i<r.length; i++){ 
      r[i] = $.trim(r[i]); 
      text += r[i]+'<br/>'; 
     } 
     $('.drop-area').html(text); 

    } 
    reader.readAsText(files[i]); 
}

在這裏嘗試拖動一個HTML文件http://jsfiddle.net/gVZRU/2/

可以解決？有什麼其他方法可以用來實現此功能嗎？

來源

2013-07-19 rogerc

您只需將white-space: pre-wrap;添加到顯示框的樣式中即可。

HTML源代碼中的多個連續空白在呈現的內容中總是摺疊爲單個輸出空白。 white-space CSS屬性允許您更改此行爲，並且pre值表示將<pre>標記用作空白（即，顯示渲染結果中的所有空白）。 pre-wrap就像pre，但允許包裝文字。

來源

2013-07-19 19:32:06 apsillers

謝謝，兄弟！ :) – rogerc

http://jsfiddle.net/gVZRU/4/ – rogerc

使用.text method來插入文本。無需手動轉義。要解決顯示問題，請不要在每個結束標記之後插入<br>標記，而只需使用適當的CSS：white-space: pre-wrap;。

來源

2013-07-19 19:35:12 Bergi

確實！謝謝。 – rogerc

Javascript - 獲取用FileReader（）讀取的文件的格式預覽？

回答

相關問題