在瀏覽器中預覽本地html文件

Question

我有一個用戶可以上傳文件的網頁。 他可以使用<t:inputFileUpload> jsf標簽選擇要上傳的文件。（此標記類似於標准HTML輸入標記， type="file" ）。

我想添加預覽功能。

當用戶選擇文件（例如： html文件）時，他可以預覽他的html本地文件。

我知道瀏覽器的安全限制原因存在“問題”。

我的第一個解決方案是將文件從用戶本地計算機加載到服務器，然后在服務器上創建指向該文件的鏈接。 問題是我的服務器存在風險，可能此文件已損壞...

有人對這個未來有一個想法和解決方案嗎？

Answer 1

這是一個簡單的JSFiddle ，它顯示了html文件的預覽。 我是從這里找到的教程創建的。

代碼中最有用的部分如下

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

這使用HTML5 FileReader來讀取和顯示html文件的內容。