브라우저에서 로컬 html 파일 미리보기

Question

사용자가 파일을 업로드 할 수있는 웹 페이지가 있습니다. <t:inputFileUpload>jsf 태그로 업로드 할 파일을 선택할 수 있습니다 (이 태그는 표준 HTML 입력 태그와 비슷합니다 (type="file")).

미리보기 기능을 추가하고 싶습니다.

사용자가 파일 (예 : html 파일)을 선택하면 HTML 로컬 파일을 미리 볼 수 있습니다.

브라우저의 보안 제한 사안에 "문제"가 있음을 알고 있습니다.

내 첫 번째 해결 방법은 사용자 로컬 컴퓨터에서 서버로 파일을로드 한 다음 서버에서 해당 파일에 대한 링크를 만드는 것입니다. 문제는 내 서버에 위험이 있다는 것입니다. 이 파일이 손상되었을 수 있습니다 ...

누구나이 미래에 대한 아이디어와 해결책이 있습니까?

Answer 1

JSFiddle은 html 개의 미리보기를 보여주는 간단한 형식입니다. 튜토리얼에서 찾은 내용은 here입니다.

당신을위한 코드의 가장 유용한 부분이 읽고 html 파일의 내용을 표시하기 위해 HTML5 FileReader를 사용하는 다음

var f = // uploaded file. 
var reader = new FileReader(); 
// Closure to capture the file information. 
reader.onload = (function(theFile) { 
    return function(e) { 
     // Render the file. 
     $("#preview").html(e.target.result); 
    }; 
})(f); 

// Read in the html file as text. 
reader.readAsText(f); 

입니다.