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

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

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

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

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