HTML 圖片上傳預(yù)覽是一個非常實用的功能，它可以讓用戶在上傳圖片的時候能夠預(yù)覽圖片，這樣就可以避免上傳錯誤的圖片。下面我們就來看一下如何實現(xiàn)這個功能的代碼。 首先我們需要一個上傳文件的input，代碼如下：

<input type="file" id="imgFile" onchange="previewImg(this);" multiple>

上面的代碼中，我們使用了onchange事件，當(dāng)用戶選擇圖片后會觸發(fā)previewImg函數(shù)，進行預(yù)覽圖片的操作。同時我們還加上了multiple屬性，這樣用戶可以選擇多個圖片上傳。 接下來我們需要寫預(yù)覽圖片的函數(shù)，代碼如下：

function previewImg(fileInput) {
var file = fileInput.files[0]; // 獲取文件對象
if (!file.type.match('image/*')) return; // 判斷是否為圖片類型
var reader = new FileReader(); // 創(chuàng)建 FileReader 對象
reader.onload = function() { // FileReader 加載成功后的回調(diào)函數(shù)
var img = document.createElement('img'); // 創(chuàng)建元素
img.src = reader.result; // 設(shè)置圖片的 src 屬性
document.body.appendChild(img); // 將插入到文檔中
};
reader.readAsDataURL(file); // 讀取文件
}

上面的代碼中，我們首先獲取上傳文件的對象，判斷是否是圖片類型。然后創(chuàng)建一個FileReader對象，通過它來讀取文件并將文件內(nèi)容轉(zhuǎn)換成 data URL 格式，最后創(chuàng)建一個img元素并將圖片的url設(shè)置為data URL，最后將圖片插入到頁面上進行預(yù)覽。 通過上面的代碼，就可以實現(xiàn)HTML圖片上傳預(yù)覽功能了。具體實現(xiàn)可以根據(jù)需求進行調(diào)整和修改，讓它更符合自己的使用場景。