我有一些 HTML 如下:
Select a file : <input type="file"><br><br>
Html Codes : <textarea id="displayHtml"></textarea><br><br>
<div id="displayPage">Display the Html Page here</div>
现在如何从本地硬盘浏览外部 HTML 文件并在 div #displayPage
中显示页面预览并将文件的 HTML 标记放入文本区域 #displayHtml
?我不知道该怎么做,所以请帮忙。
我的 fiddle 在这里:https://jsfiddle.net/zm6ga2ev/1/
最佳答案
您可以使用 HTML5 中的文件 API 执行此操作。
这是一个快速而肮脏的 JS 示例:
function handleFileSelect(evt) {
var file = evt.target.files[0]; // File inputs are an array - get the first element
var reader = new FileReader();
reader.onload = function(e) {
// Render the supplied file
document.getElementById('displayHtml').value = e.target.result
document.getElementById('displayPage').innerHTML = e.target.result;
};
// Read in the HTML file.
reader.readAsText(file);
};
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
JSFiddle:https://jsfiddle.net/8te1hyv9/
可以在以下位置找到有关所有内容如何组合在一起的体面解释和更全面的示例:http://www.html5rocks.com/en/tutorials/file/dndfiles/
关于javascript - 如何加载外部 HTML 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39116086/