js怎么实现预览
实现文件预览的方法
在JavaScript中实现文件预览功能，通常涉及读取用户上传的文件内容并将其显示在页面上。以下是几种常见的文件预览实现方式。
图片预览
使用FileReader对象读取图片文件并显示在页面上。
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file.type.match('image.*')) return;
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
};
reader.readAsDataURL(file);
});文本文件预览
读取文本文件内容并显示在页面上。
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file.type.match('text.*')) return;
const reader = new FileReader();
reader.onload = function(e) {
preview.textContent = e.target.result;
};
reader.readAsText(file);
});PDF预览
使用第三方库（如PDF.js）实现PDF文件预览。
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file.type !== 'application/pdf') return;
const reader = new FileReader();
reader.onload = function(e) {
const typedArray = new Uint8Array(e.target.result);
pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {
pdf.getPage(1).then(function(page) {
const viewport = page.getViewport({ scale: 1.0 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
preview.appendChild(canvas);
page.render({
canvasContext: context,
viewport: viewport
});
});
});
};
reader.readAsArrayBuffer(file);
});视频/音频预览
直接使用URL.createObjectURL生成临时URL实现媒体文件预览。
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file.type.match('video.*') && !file.type.match('audio.*')) return;
const url = URL.createObjectURL(file);
preview.src = url;
});注意事项
- 使用
FileReader时要注意异步操作，确保在回调函数中处理结果。 - 对于大文件，考虑使用分块读取或流式处理避免内存问题。
- 使用第三方库预览特殊格式文件（如PDF、Office文档）时，需先引入相关库。
- 生成的临时URL（URL.createObjectURL）应及时释放（URL.revokeObjectURL）以避免内存泄漏。
