通过File API实现HTML文件选择与预览：使用FileReader读取文件内容并显示在页面中；2. 安全预览需转义HTML或用沙箱iframe隔离，防止XSS攻击；3. 利用FormData和fetch将文件上传至服务器，确保后端支持multipart/form-data解析。
立即学习“前端免费学习笔记（深入）”；
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(/, ‘/g, ‘>’)
.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格式的请求体。
以上就是html5文件如何实现前端预览与上传 html5文件API的基本使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591351.html
微信扫一扫 
支付宝扫一扫 
