HTML5上傳圖片并預覽功能已經成為現代網頁開發中必不可少的一環。該功能使得用戶可以直接在網站上上傳圖片，而無需通過第三方軟件或外部鏈接。下面，我們將為大家分享一份HTML5上傳圖片并預覽的代碼示例。 首先，我們需要在HTML代碼中添加一個文件上傳表單，如下所示：

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>

其中，action屬性用于指定上傳文件的路徑，method屬性用于指定表單數據的傳輸模式。enctype屬性為multipart/form-data，表示文件會以二進制流的形式傳輸。input標簽的type屬性為file，意味著這是一個文件上傳的輸入框。name屬性指定該輸入框的名稱，id屬性用于標識該輸入框。 接下來，我們需要添加一個用于預覽圖片的區域。這個區域需要一個img標簽，再加上一個CSS樣式：

<style>
#preview {
height: 200px;  // 預覽區域的高度
width: 200px;   // 預覽區域的寬度
border: 1px solid #ccc; // 預覽區域的邊框
}
</style>
<div id="preview">
<img src="#" alt="Image Preview" id="image_preview" style="max-height: 100%; max-width: 100%;">
</div>

注意，img標簽的src屬性是一個帶有#號的占位符，而不是一個具體的圖片鏈接。我們將在JavaScript代碼中更改這個屬性，以完成預覽圖片的功能。 最后，我們需要添加一個JavaScript代碼段，用于監聽文件上傳框的變化，并將圖片預覽添加到預覽區域中。

<script>
var preview = document.querySelector('#image_preview');
var fileUpload = document.querySelector('#fileToUpload');
fileUpload.addEventListener('change', function(event) {
var reader = new FileReader();
reader.onload = function(event) {
preview.src = event.target.result;
};
reader.readAsDataURL(event.target.files[0]);
});
</script>

在這段代碼中，我們首先獲取了文件上傳框和圖片預覽的元素。然后，我們添加了一個事件監聽器，當文件上傳框的值發生變化時，會觸發該事件。我們使用FileReader對象讀取被上傳圖片的信息，并使用DataURL編碼將圖片轉換為base64編碼。最后，我們將這個base64編碼添加到img標簽的src屬性中，實現了圖片預覽的功能。 以上就是使用HTML5實現上傳圖片并預覽的代碼示例，通過這個功能，用戶可以在網站上直接上傳自己的圖片，免去了上傳到第三方平臺的麻煩，極大地提高了用戶的使用體驗。