js实现浏览本地文件并显示扩展名的方法

2023年5月27日上午7:55 • JavaScript

要实现浏览本地文件并显示扩展名的方法，需要使用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技术站