Javascript - FileReader()로 읽은 파일의 형식 미리보기를 가져 옵니까?

Question

드래그 파일 기능을 구현하려고했습니다. 파일 텍스트 (이 경우에는 HTML 파일)로 미리보기가 필요합니다. 그러나 FileReader의 결과를 DOM에 삽입하면 미리보기에서 줄 바꿈과 텍스트 들여 쓰기가 모두 손실됩니다.

jQuery .split()을 사용하고 <br/>을 삽입하려고 시도했지만 텍스트의 모든 들여 쓰기가 손실됩니다. 여기 http://jsfiddle.net/gVZRU/2/

를 HTML 파일을 드래그

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]); 
} 

시도는 해결 할 수 있습니까? 이 기능을 사용하기 위해 취할 수있는 다른 방법이 있습니까?

Answer 1

표시 상자 스타일에 white-space: pre-wrap;을 추가하기 만하면됩니다.

HTML 원본의 여러 연속 된 공백은 항상 렌더링 된 콘텐츠의 단일 출력 공백으로 축소됩니다. white-space CSS 속성을 사용하면이 동작을 변경할 수 있습니다. pre 값은 <pre> 태그에서와 같이 공백을 처리하는 것으로 표시됩니다 (즉, 렌더링 된 결과의 모든 공백을 표시). pre-wrap은 pre과 같지만 텍스트를 줄 바꿈 할 수 있습니다.

Answer 2

.text method을 사용하여 텍스트를 삽입하십시오. 수동으로 탈출 할 필요가 없습니다. 디스플레이 문제를 해결하려면 모든 닫기 태그 뒤에 <br> 태그를 삽입하지 말고 적절한 CSS (white-space: pre-wrap;) 만 사용하십시오.