在網頁設計中，圖片預覽是一個非常重要的組成部分，它能夠為用戶提供許多便利。JavaScript 是在這方面效果非常出色的語言，不僅可以實現圖片預覽，而且功能也非常強大。在這篇文章中，我將向大家介紹如何使用 JavaScript 實現圖片預覽。 在實現圖片預覽時，我們可以用到一些重要的 JavaScript 代碼。其中，一段非常常見的代碼就是下面這段：

function previewImage(file)
{
var gallery = document.getElementById("gallery");
if (gallery.getElementsByTagName("img").length >0)
{
gallery.removeChild(gallery.getElementsByTagName("img")[0]);
}
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
img.style.width = "200px";
gallery.appendChild(img);
}

上述代碼可以實現以下功能：當用戶選擇了一個文件后，這個函數就會被調用。然后它會找到一個 id 為 gallery 的 div 元素，并把其中所有的 img 元素都刪掉。之后，在該元素內新建一個 img 元素，讀取用戶選擇的文件，并且不論其真實大小如何，都會以寬度為 200 像素的形式進行預覽。最后，img 元素將會被添加進 gallery 元素內。 當然，實現圖片預覽還可以用到很多其他的代碼，比如 jQuery 或 Bootstrap 中的一些函數。但以上代碼作為一個例子，已經足以說明核心思想。 除此之外，我們還可以對這個代碼進行增強。比如，加入一些對圖片格式的限制，讓其只預覽特定類型的文件：

function previewImage(file)
{
var gallery = document.getElementById("gallery");
const allowedFormats = ["jpg", "jpeg", "png", "gif"];
if (allowedFormats.includes(file.name.split(".").pop()))
{
if (gallery.getElementsByTagName("img").length >0)
{
gallery.removeChild(gallery.getElementsByTagName("img")[0]);
}
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
img.style.width = "200px";
gallery.appendChild(img);
}
else
{
alert("這不是圖片哦！");
}
}

上述代碼中，我給代碼加入了一個 allowedFormats 數組，它包含了我們預期正確的圖片文件格式。如果用戶選擇的文件格式不在 allowedFormats 的范圍內，代碼將會詳細解釋原因，然后退出預覽模式。這么做是為了保證用戶體驗。 總的來說，JavaScript 的代碼在圖片預覽這個領域是非常實用的，可以讓我們輕松地實現一些復雜的功能。當然，如果你對這方面的知識點還有疑問，可以通過各種課程或者網上的文章進行更深入的學習。