在網頁上傳文件是一項必要的功能，而在上傳文件前預覽文件內容則更顯得實用。在這篇文章里，我們將深入探討如何使用JavaScript預覽文件上傳，在用戶上傳文件之前，增加預覽文件的功能體驗。
在網頁上只能預覽到一些常見的格式，比如圖片和視頻等。對于其他格式的文件，我們可以通過預覽對其內容進行判斷和確認。下面來看看如何實現預覽常見的文檔文件格式，比如PDF、Word和Excel。
首先，我們需要一個文件選擇器，讓用戶選擇需要上傳的文件。下面是基礎的文件選擇器代碼。

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

接下來，我們需要通過JS讀取文件，并將其在頁面上進行預覽。對于PDF、Word以及Excel文件，我們可以使用第三方庫來進行渲染和預覽。

// 加載PDF.js庫來渲染PDF文件
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
const previewPDF = (fileInput) => {
const file = fileInput.files[0];
const fileReader = new FileReader();
<br>
  fileReader.onload = () => {
pdfjsLib.getDocument(fileReader.result).then((pdf) => {
pdf.getPage(1).then((page) => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 450;
<br>
        const viewport = page.getViewport({scale: 1});
const renderContext = {
canvasContext: context,
viewport: viewport
};
<br>
        page.render(renderContext).promise.then(() => {
const pdfPreview = document.querySelector('#pdfPreview');
pdfPreview.appendChild(canvas);
});
});
});
};
fileReader.readAsDataURL(file);
};

上面的代碼中，我們加載了PDF.js庫，并使用它來渲染PDF文件。讀取文件時，我們創建一個FileReader對象，并在其onload回調函數中，使用pdfjsLib來加載PDF文件。
對于Word和Excel文件，我們可以使用另一個庫，openxml。接下來，為了方便，我們使用一個第三方庫，officegen，來將Word和Excel文件轉換成HTML格式。這樣，我們就可以在頁面上通過iframe來進行預覽。代碼如下：

const previewMSFile = (fileInput) => {
const file = fileInput.files[0];
<br>
  file.arrayBuffer().then((buffer) => {
const officegen = require('officegen');
const docx = officegen('docx');
const sheet = officegen('xlsx');
<br>
    if (/\.docx$/i.test(file.name)) {
const paragraph = docx.createP('Hello World!');
docx.generateAsync({type: 'blob'}).then((blob) => {
const fileURL = URL.createObjectURL(blob);
const msPreview = document.querySelector('#msPreview');
msPreview.innerHTML = <code><iframe src="${fileURL}"></iframe></code>;
});
} else if (/\.xlsx$/i.test(file.name)) {
sheet.generateAsync({type: 'blob'}).then((blob) => {
const fileURL = URL.createObjectURL(blob);
const msPreview = document.querySelector('#msPreview');
msPreview.innerHTML = <code><iframe src="${fileURL}"></iframe></code>;
});
}
});
};

上述代碼中，我們首先使用file.arrayBuffer()方法來讀取文件，然后使用officegen庫中的createP()和sheet()方法來創建文檔和工作表。最后，我們使用docx.generateAsync()和sheet.generateAsync()方法將文檔和工作表轉換為HTML，并在頁面上使用iframe進行預覽。
總結一下，我們可以使用運用JavaScript來預覽上傳的PDF、Word以及Excel文件。我們使用了第三方庫pdf.js和officegen來方便地將這些文件格式渲染成HTML，并在頁面上使用iframe進行預覽。通過預覽，用戶可以更好地確認上傳的文件和內容，增強了網站的用戶體驗。