在html5开发中，插入本地文档的需求十分常见，既包含引入项目内的本地静态资源，也包含读取用户设备上的本地文档内容，不同的场景对应不同的实现方案和路径设置规则。
一、引入项目内本地静态文档
如果是引入和html5文件同属一个项目的本地静态文档，比如图片、文本文件、音视频文件等，主要通过正确的路径设置来实现插入，核心是要区分相对路径和绝对路径的使用场景。
1. 相对路径设置
相对路径是相对于当前html5文件所在位置的路径，适合项目内部资源引用，常见的路径表示方式如下：
./file.txt：表示当前目录下的file.txt文档../docs/note.html：表示上一级目录中docs文件夹下的note.html文档assets/img/photo.jpg：表示当前目录下assets/img文件夹中的photo.jpg图片文档
以下是使用<img>标签插入同目录下的本地图片文档的示例：
<!-- 插入当前目录下的本地图片文档 --> <img src="./local_photo.jpg" alt="本地图片">
2. 绝对路径设置
绝对路径是从根目录开始的完整路径，在本地开发环境中，根目录通常是项目文件夹的根位置，以/开头。比如项目根目录下有static文件夹，里面存放了test.pdf文档，插入方式如下：
<!-- 插入项目根目录下static文件夹中的本地pdf文档 --> <a href="/static/test.pdf">查看本地PDF文档</a>
二、读取用户设备上的本地文档
如果需要插入用户本地设备上的文档，比如用户选择的本地txt、图片等文件，需要使用html5新增的<input>标签的file类型和File API来实现，这种方式不需要知道用户文件的具体本地路径，避免安全权限问题。
1. 基础文件选择实现
首先通过<input type="file">标签让用户选择本地文档，该标签会触发系统的文件选择窗口，用户选择文件后会将文件信息存储在files属性中。
<!-- 允许用户选择本地文本文档 --> <input type="file" id="localFile" accept=".txt,.pdf,.jpg,.png"> <div id="fileContent"></div>
2. 使用File API读取文档内容
通过FileReader对象可以读取用户选择的本地文档内容，以下是读取本地txt文档内容并显示在页面上的完整示例：
// 获取文件选择元素
const fileInput = document.getElementById('localFile');
// 监听文件选择变化事件
fileInput.addEventListener('change', function() {
// 获取用户选择的第一个文件
const selectedFile = this.files[0];
if (!selectedFile) {
return;
}
// 创建FileReader实例
const reader = new FileReader();
// 读取文件为文本格式
reader.readAsText(selectedFile, 'utf-8');
// 读取完成后的回调
reader.onload = function() {
// 将读取到的内容显示在页面上
document.getElementById('fileContent').innerText = this.result;
};
// 读取错误的回调
reader.onerror = function() {
console.log('读取本地文档失败');
};
});
三、路径设置注意事项
在设置本地文档路径时，需要注意以下问题避免插入失败：
- 项目内本地文档的路径不要使用用户设备的完整本地路径，比如
C:/Users/test/photo.jpg，这类路径在浏览器中会因为安全限制无法访问 - 使用相对路径时，要确认当前html5文件的位置和本地文档的位置关系，避免路径层级写错
- 如果用户选择的本地文档需要上传到服务器，不需要获取本地路径，直接通过FormData将文件对象传递给后端接口即可
如果是需要预览用户选择的本地图片文档，也可以通过File API生成临时URL来实现，示例代码如下：
const fileInput = document.getElementById('localFile');
fileInput.addEventListener('change', function() {
const file = this.files[0];
if (file && file.type.startsWith('image/')) {
// 生成临时本地URL
const tempUrl = URL.createObjectURL(file);
// 创建img标签插入页面
const img = document.createElement('img');
img.src = tempUrl;
img.style.width = '300px';
document.getElementById('fileContent').appendChild(img);
// 使用完成后释放临时URL
URL.revokeObjectURL(tempUrl);
}
});