JQuery 是一種流行的 JavaScript 庫(kù)，可用于創(chuàng)建交互式 Web 頁(yè)面。其中一項(xiàng)重要功能是預(yù)覽圖片。預(yù)覽圖片可讓用戶在上傳圖片之前預(yù)覽所選圖片，以確保圖片選擇正確。在本文中，我們將介紹如何使用 JQuery 實(shí)現(xiàn)預(yù)覽圖片的功能。

$(function () {
$('#file-input').change(function () {
var file = $(this)[0].files[0];
var fileReader = new FileReader();
fileReader.onload = function () {
$('#preview').attr('src', fileReader.result);
};
fileReader.readAsDataURL(file);
});
});

以上代碼使用 JQuery 監(jiān)聽文件輸入框的變化。當(dāng)文件選擇發(fā)生變化時(shí)，代碼使用新的 FileReader 對(duì)象讀取文件并將其轉(zhuǎn)換為基于 Base64 的數(shù)據(jù) URL。然后，代碼將此 URL 用作圖像的源，以顯示所選圖像的預(yù)覽。

請(qǐng)注意，我們使用了選擇器#file-input和#preview，這意味著我們必須在 HTML 代碼中定義文件輸入框和圖像預(yù)覽。例如：

<input type="file" id="file-input" />
<img id="preview" src="" />

請(qǐng)確保選擇器與 HTML 標(biāo)記相符合，因?yàn)檫x擇器是代碼正確工作的關(guān)鍵。