上傳文件前預覽的核心在于利用前端技術讓用戶提前查看文件內容以避免錯誤上傳。1.使用filereader api結合標簽可實現圖片預覽；2.通過url.createobjecturl()方法預覽圖片或視頻，效率更高；3.針對pdf文件，可用pdf.JS庫解析并渲染到canvas；4.文本文件可通過filereader讀取后顯示在textarea或pre標簽中；5.復雜文檔如word可借助第三方庫如docx.js實現預覽。若圖片預覽模糊，可通過限制尺寸、canvas重繪或服務器生成縮略圖解決；大文件可采用分片讀取、虛擬化或web worker處理；兼容性方面則使用polyfill、特性檢測和漸進增強策略確保多瀏覽器支持。這些方法有效提升了用戶體驗并減輕了服務器負擔。
上傳文件前預覽，簡單來說，就是讓用戶在真正上傳之前，先看到他們選擇的文件內容，比如圖片、視頻或者文檔。這能避免傳錯文件，提升用戶體驗，也減輕服務器壓力，畢竟傳錯了還得重新傳嘛。
上傳前預覽的5種實現技巧！
-
最常見的：FileReader API +
標簽（圖片預覽）
這是最經典的方式。FileReader 可以讀取本地文件內容，然后通過
標簽展示圖片。
const input = document.getElementById('fileInput'); const img = document.getElementById('previewImg'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { img.src = e.target.result; } reader.readAsDataURL(file); });這段代碼監聽文件選擇框的 change 事件，讀取選擇的文件，然后將讀取到的 Data URL 設置為
的 src 屬性，就實現了圖片預覽。簡單直接，但只能預覽圖片。
-
升級版：createObjectURL (也用于圖片、視頻預覽)
URL.createObjectURL() 方法可以創建一個指向 Blob 或 File 對象的 URL。 相比 FileReader，它更高效，因為它不需要讀取整個文件到內存中。
const input = document.getElementById('fileInput'); const video = document.getElementById('previewVideo'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const url = URL.createObjectURL(file); video.src = url; video.addEventListener('loadedmetadata', () => { URL.revokeObjectURL(url); // 釋放資源 }); });這里展示了視頻預覽的例子，但同樣適用于圖片。 URL.revokeObjectURL() 很重要，用完要釋放資源，否則會造成內存泄漏。
-
針對PDF：pdf.js (PDF預覽)
如果需要預覽PDF，就需要用到專門的庫了。 pdf.js 是 Mozilla 提供的 PDF 解析渲染庫。
// 假設你已經引入了 pdf.js const input = document.getElementById('fileInput'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const fileReader = new FileReader(); fileReader.onload = function() { const typedarray = new Uint8Array(this.result); pdfjsLib.getDocument(typedarray).promise.then(function(pdf) { // 獲取第一頁 pdf.getPage(1).then(function(page) { const viewport = page.getViewport({ scale: 1 }); const canvas = document.getElementById('pdfCanvas'); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context const renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); }; fileReader.readAsArrayBuffer(file); });這段代碼比較復雜，需要引入 pdf.js 庫，然后讀取 PDF 文件，解析 PDF 內容，最后渲染到 canvas 上。
-
簡單的文本文件預覽：FileReader API (文本預覽)
對于簡單的文本文件，可以直接使用 FileReader 讀取文件內容，然后顯示在一個 textarea 或者 pre 標簽中。
const input = document.getElementById('fileInput'); const textarea = document.getElementById('previewText'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { textarea.value = e.target.result; } reader.readAsText(file); });這種方式只能預覽純文本文件，對于復雜的文檔格式，就無能為力了。
-
借助第三方庫：例如docx.js (Word文檔預覽)
如果需要預覽 Word 文檔，就需要借助專門的庫，比如 docx.js。 它可以在瀏覽器端解析和渲染 Word 文檔。
使用方式比較復雜，涉及到加載文檔、解析文檔結構、渲染文檔內容等步驟，具體可以參考 docx.js 的官方文檔。
為什么我上傳的圖片預覽模糊？
圖片預覽模糊通常是因為預覽圖的尺寸小于實際上傳的圖片尺寸。瀏覽器為了快速顯示預覽圖，會對圖片進行壓縮或縮放，導致圖片質量下降。
- 解決方案：
- 限制預覽圖的最大尺寸： 可以通過 css 限制預覽圖的顯示尺寸，但不要讓它小于實際圖片的尺寸。
- 使用 Canvas 重新繪制圖片： 可以使用 Canvas 將原始圖片繪制到指定尺寸的 Canvas 上，然后將 Canvas 的內容轉換為 Data URL，作為預覽圖的 src。 這樣可以保證預覽圖的質量。
- 服務器端生成縮略圖： 將圖片上傳到服務器后，由服務器生成縮略圖，然后將縮略圖的 URL 返回給客戶端，作為預覽圖的 src。 這種方式可以保證預覽圖的質量和性能。
如何處理大文件上傳預覽？
大文件上傳預覽可能會導致瀏覽器卡頓甚至崩潰。
- 解決方案：
如何兼容各種瀏覽器？
不同的瀏覽器對 FileReader API 和 createObjectURL 方法的支持程度可能不同。
- 解決方案：
- 使用 Polyfill： 可以使用 Polyfill 來填補瀏覽器對某些 API 的缺失。
- 特性檢測： 在使用某個 API 之前，先檢測瀏覽器是否支持該 API。
- 漸進增強： 對于不支持某些 API 的瀏覽器，提供降級方案。 例如，如果瀏覽器不支持 createObjectURL 方法，可以使用 FileReader API 代替。
