javascript - 如何加载外部 HTML 文件

Question

我有一些 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/

Answer 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/