在浏览器中预览本地html文件

Question

我有用户可以上传文件的网页。 他可以使用<t:inputFileUpload>​​标签选择要上传的文件（该标签与标准HTML输入标签type="file"一样）。

我想添加预览功能。

当用户选择一个文件（例如：html文件）时，他可以预览他的html本地文件。

我知道有浏览器的安全限制原因存在“问题”。

我的第一个解决方案是将文件从用户本地计算机加载到服务器，然后在服务器上创建指向该文件的链接。问题是，我的服务器上有风险， 也许这个文件已损坏...

任何人有一个想法和解决方案，这个未来？

Answer 1

这是一个简单的JSFiddle，它显示html文件的预览。我从教程here创建它。

你的代码的最有用的部分是以下

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文件的内容。