CSS 通過input type="file"元素實現(xiàn)了圖片上傳功能。這個功能的實現(xiàn)需要借助 HTML 和 JavaScript 的支持。

首先，需要在 HTML 中添加一個input type="file"元素。然后，就可以將這個元素樣式化，使其看起來像一個按鈕。我們可以使用 CSS 的背景圖和樣式屬性，甚至可以添加懸停效果。

<input type="file" id="upload" name="upload" style="display: none;">
<label for="upload" class="button">上傳圖片</label>
.button {
display: inline-block;
padding: 0.5em 1em;
background-color: #4CAF50;
color: white;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #3E8E41;
}

接下來，需要使用 JavaScript 來處理文件上傳。可以通過監(jiān)聽change事件，獲取選中文件的信息和內(nèi)容。然后可以使用 AJAX 或者表單提交將文件上傳到服務器，這里不做詳述，重點在于如何顯示圖片。

如果想要在上傳完成后立即在頁面中顯示圖片，可以使用URL.createObjectURL()方法。這個方法可以將傳入的文件對象轉(zhuǎn)換成表示該文件的 URL。然后可以創(chuàng)建一個<img>元素，將這個 URL 作為src屬性值賦給它即可。

const file = document.getElementById('upload').files[0];
const url = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);

代碼中使用了document.createElement()來創(chuàng)建了一個<img>元素，并將生成的 URL 賦給了它的src屬性。最后，使用appendChild()方法將這個元素添加到頁面中，就可以看到上傳的圖片了。