通过File API实现HTML文件选择与预览：使用FileReader读取文件内容并显示在页面中；2. 安全预览需转义HTML或用沙箱iframe隔离，防止XSS攻击；3. 利用FormData和fetch将文件上传至服务器，确保后端支持multipart/form-data解析。
如果您需要让用户在网页中选择HTML文件并实现前端预览与上传功能，可以通过HTML5提供的File API来完成。该API允许JavaScript访问用户本地文件内容，并在不发送到服务器的情况下进行读取和预览。以下是具体实现方法：
一、使用FileReader读取HTML文件内容
通过FileReader对象可以将用户选择的HTML文件读取为文本字符串，从而在页面中显示其原始内容或渲染效果。
1、在页面中添加文件输入控件和用于显示预览的区域：
html,.htm" />
立即学习“前端免费学习笔记（深入）”；
2、获取文件输入元素并监听change事件：
document.getElementById('htmlFile').addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) return;
if (!file.type || file.type === 'text/html' || file.name.endsWith('.html') || file.name.endsWith('.htm')) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').innerHTML = e.target.result;
};
reader.readAsText(file, 'UTF-8');
} else {
alert('请选择有效的HTML文件');
}
});
二、安全地预览HTML文件中的结构化内容
直接将HTML文件内容插入页面可能导致XSS攻击，因此应先对内容进行转义处理后再展示源码，或使用沙箱iframe隔离渲染。
1、创建一个函数用于转义HTML特殊字符以防止脚本执行：
function escapeHtml(unsafe) {
return unsafe.replace(/&/g, '&').replace(/, 'zuojiankuohaophpcn').replace(/>/g, 'youjiankuohaophpcn')
.replace(/"/g, '"').replace(/'/g, ''');
}
2、修改FileReader的onload回调，使用转义后的内容显示源码：
reader.onload = function(e) {
document.getElementById('preview').textContent = e.target.result;
};
3、如需渲染预览，可使用沙箱iframe增强安全性：
const iframe = document.createElement('iframe');
iframe.sandbox = 'allow-same-origin';
document.body.appendChild(iframe);
iframe.contentDocument.open();
iframe.contentDocument.write(e.target.result);
iframe.contentDocument.close();
三、通过FormData上传HTML文件至服务器
在完成前端预览后，若需将文件上传至服务器，可利用XMLHttpRequest或fetch API结合FormData对象发送文件数据。
1、创建FormData实例并将选中的文件添加进去：
const formData = new FormData();
formData.append('uploaded_html_file', file);
2、使用fetch发送POST请求上传文件：
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
})
.catch(error => {
console.error('上传失败:', error);
});
3、确保后端接口能正确解析multipart/form-data格式的请求体。
