要实现浏览本地文件并显示扩展名的方法，需要使用HTML5 File API和JavaScript。下面是具体步骤：
- 创建html模板，添加文件输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浏览本地文件</title>
</head>
<body>
<input type="file" id="file-input">
<pre id="file-contents"></pre>
</body>
</html>
2.编写JavaScript代码，监听文件输入框，显示文件名和扩展名
const fileInput = document.querySelector('input[type="file"]');
const fileContent = document.getElementById('file-contents');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0]; // 获取选择的文件
const fileName = file.name; // 文件名
const extension = fileName.split('.').pop(); // 扩展名
fileContent.textContent = `文件名：${fileName}，扩展名：${extension}`; // 将文件名和扩展名显示在内容框内
});
- 需要注意的是，浏览本地文件对接口的操作是异步的，因此我们需要用
FileReader来读取文件内容和异步处理。在上述change事件的回调函数中，将以下代码添加：
const fileReader = new FileReader(); // 创建一个FileReader对象
fileReader.readAsText(file); // 读取文件内容
fileReader.onload = () => {
const contents = fileReader.result; // 文件内容
fileContent.textContent = `文件名：${fileName}，扩展名：${extension}，内容：${contents}`; // 将文件名、扩展名和内容显示在内容框内
}
示例1：使用readAsDataURL方法读取文件并显示在页面上
const fileInput = document.querySelector('input[type="file"]');
const fileContent = document.getElementById('file-contents');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0]; // 获取选择的文件
const fileName = file.name; // 文件名
const extension = fileName.split('.').pop(); // 扩展名
// 读取文件内容并显示在页面上
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
const contents = fileReader.result;
fileContent.innerHTML = `
<p>文件名：${fileName}</p>
<p>扩展名：${extension}</p>
<p>内容：</p>
<img src="${contents}" alt="${fileName}">
`;
}
});
示例2：将文件以文本形式保存在浏览器本地存储中
const fileInput = document.querySelector('input[type="file"]');
const fileContent = document.getElementById('file-contents');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0]; // 获取选择的文件
const fileName = file.name; // 文件名
const extension = fileName.split('.').pop(); // 扩展名
// 读取文件内容并以文本形式保存在浏览器本地存储中
const fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = () => {
const contents = fileReader.result;
localStorage.setItem(fileName, contents); // 保存在localStorage中
fileContent.innerHTML = `
<p>文件名：${fileName}</p>
<p>扩展名：${extension}</p>
<p>内容：</p>
<pre>${contents}</pre>
`;
}
});
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现浏览本地文件并显示扩展名的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 