js 文件预览

// 示例代码：使用 JavaScript 实现文件预览功能

// 获取文件输入元素
const fileInput = document.getElementById('fileInput');

// 监听文件选择事件
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0]; // 获取选中的文件

    if (file) {
        const reader = new FileReader(); // 创建 FileReader 对象

        // 文件读取成功后的回调函数
        reader.onload = function(e) {
            const fileContent = e.target.result; // 获取文件内容

            // 根据文件类型进行不同处理
            if (file.type.startsWith('image/')) {
                // 如果是图片文件，创建 img 元素并设置 src
                const imgElement = document.createElement('img');
                imgElement.src = fileContent;
                document.body.appendChild(imgElement);
            } else if (file.type === 'application/pdf') {
                // 如果是 PDF 文件，使用 PDF.js 或嵌入式 iframe 进行预览
                const pdfIframe = document.createElement('iframe');
                pdfIframe.src = URL.createObjectURL(file);
                document.body.appendChild(pdfIframe);
            } else if (file.type === 'text/plain' || file.type === 'application/json') {
                // 如果是文本或 JSON 文件，直接显示内容
                const preElement = document.createElement('pre');
                preElement.textContent = fileContent;
                document.body.appendChild(preElement);
            } else {
                console.log('不支持的文件类型');
            }
        };

        // 读取文件为 Data URL
        reader.readAsDataURL(file);
    }
});

解释说明：

1. 获取文件输入元素：通过 document.getElementById 获取文件输入框。
2. 监听文件选择事件：当用户选择文件时触发 change 事件。
3. 读取文件：使用 FileReader 对象读取文件内容。根据文件类型（如图片、PDF、文本等），采取不同的预览方式。
4. 预览文件：根据文件类型，分别创建相应的 HTML 元素（如 img、iframe、pre）来显示文件内容。