在前端開發中，預覽圖是不可或缺的一部分。它可以在用戶選擇上傳圖片后，顯示用戶即將上傳的圖片，以便用戶確認上傳的圖片是否正確。在實際開發中，我們可以使用 JavaScript 實現預覽圖的功能，本文將詳細介紹 JavaScript 預覽圖的實現方法。

首先，我們需要在 HTML 中添加一個文件選擇框，用于用戶選擇要上傳的文件。代碼如下：

<input type="file" accept="image/*" onchange="previewImage(this)">

其中，accept 屬性指定上傳文件的類型為圖片，onchange 事件監聽用戶選擇文件的操作，當用戶選擇文件后，JavaScript 代碼會獲取文件并顯示預覽圖。

接下來，我們需要編寫 JavaScript 代碼實現預覽圖的功能。代碼如下：

function previewImage(file) {
var reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement('img');
img.setAttribute('src', event.target.result);
document.body.appendChild(img);
}
reader.readAsDataURL(file.files[0]);
}

代碼中，首先創建一個 FileReader 對象，用于讀取文件。然后，將 onload 事件監聽 FileReader 對象的讀取完成事件，該事件會將文件的內容傳遞給 event.target.result 屬性，通過該屬性獲取文件的數據 URL 格式，再將數據 URL 賦值給 img 元素的 src 屬性，最后添加到頁面中即可。

如果要實現多張圖片預覽，可以參考以下代碼：

function previewImages(files) {
var container = document.createElement('div')
for (var i = 0; i < files.length; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement('img');
img.setAttribute('src', event.target.result);
container.appendChild(img);
}
reader.readAsDataURL(files[i]);
}
document.body.appendChild(container);
}

以上代碼中，使用 for 循環遍歷 files 數組，將每張圖片的數據 URL 格式添加到 img 元素的 src 屬性中，并將圖片添加到 container 容器中，最后將容器添加到頁面中。

除了使用 FileReader 對象實現預覽圖功能，我們還可以使用 URL.createObjectURL() 方法生成文件的臨時 URL 地址來實現預覽圖。代碼如下：

function previewFile(file) {
var url = URL.createObjectURL(file);
var img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
}

代碼中，使用 URL.createObjectURL() 方法生成文件的臨時 URL 地址，再將該地址賦值給 img 元素的 src 屬性，并添加到頁面中。

總結：預覽圖是網站開發中必不可少的功能。在實際開發中，我們可以使用 JavaScript 實現預覽圖功能，通過 FileReader 對象或 URL.createObjectURL() 方法將文件轉換為數據 URL 或臨時 URL 地址，再將地址賦值給 img 元素的 src 屬性，實現預覽圖功能。以上就是本文介紹的 JavaScript 預覽圖的實現方法。