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

时间:2012-05-01 14:19:38

标签: java javascript html jsf file-upload

我有一个用户可以上传文件的网页。 他可以使用<t:inputFileUpload> jsf标记选择要上传的文件。(此标记类似于带有type="file"的标准HTML输入标记。)

我想添加预览功能。

当用户选择文件(例如:html文件)时,他可以预览他的html本地文件。

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

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

任何人都有这个未来的想法和解决方案吗?

1 个答案:

答案 0 :(得分:5)

这是一个简单的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文件的内容。