HTML如何实现文件预览？怎么在网页查看文件内容？

<!-- 预览PDF文件 -->
<iframe src="path/to/your/document.pdf" width="800" height="600" frameborder="0"></iframe>

<!-- 预览图片 -->
<iframe src="path/to/your/image.jpg" width="600" height="400" frameborder="0"></iframe>

<!-- 预览纯文本文件 -->
<iframe src="path/to/your/textfile.txt" width="600" height="400" frameborder="0"></iframe>

<input type="file" id="imageInput" accept="image/*">
@@##@@

<script>
    document.getElementById('imageInput').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();

            reader.onload = function(e) {
                const imgElement = document.getElementById('previewImage');
                imgElement.src = e.target.result; // e.target.result 包含图片的Base64编码
                imgElement.style.display = 'block';
            };

            reader.readAsDataURL(file); // 将文件读取为Data URL (Base64编码)
        }
    });
</script>

<input type="file" id="fileInput">
<div id="filePreview"></div>

<script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const fileURL = URL.createObjectURL(file);
            const previewDiv = document.getElementById('filePreview');
            previewDiv.innerHTML = ''; // 清空之前的预览

            if (file.type.startsWith('image/')) {
                const img = document.createElement('img');
                img.src = fileURL;
                img.style.maxWidth = '100%';
                previewDiv.appendChild(img);
            } else if (file.type === 'application/pdf') {
                const iframe = document.createElement('iframe');
                iframe.src = fileURL;
                iframe.width = '100%';
                iframe.height = '500px';
                iframe.frameborder = '0';
                previewDiv.appendChild(iframe);
            } else if (file.type.startsWith('text/')) {
                // 对于文本文件，通常还是用FileReader读取内容更直接
                const reader = new FileReader();
                reader.onload = function(e) {
                    const pre = document.createElement('pre');
                    pre.textContent = e.target.result;
                    previewDiv.appendChild(pre);
                };
                reader.readAsText(file);
            } else {
                // 对于其他不支持直接预览的类型，提供下载链接
                const link = document.createElement('a');
                link.href = fileURL;
                link.download = file.name;
                link.textContent = `点击下载: ${file.name}`;
                previewDiv.appendChild(link);
            }

            // 重要的：在不再需要URL时释放它，以释放内存
            // setTimeout(() => URL.revokeObjectURL(fileURL), 1000 * 60); // 比如一分钟后释放
        }
    });
</script>

<video src="path/to/your/video.mp4" controls width="400"></video>
<audio src="path/to/your/audio.mp3" controls></audio>