在網(wǎng)頁(yè)制作過程中，上傳單張圖片是常見的需求。CSS提供了方便的方式來實(shí)現(xiàn)圖片上傳功能，下面是CSS上傳單張圖片的代碼實(shí)現(xiàn)。

/* HTML代碼結(jié)構(gòu) */
<div class="upload">
<input type="file" id="file" name="file" accept="image/*">
<label for="file">上傳圖片</label>
<img id="preview">
</div>
/* CSS代碼 */
.upload {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
.upload input[type="file"] {
position: absolute;
width: 200px;
height: 200px;
opacity: 0;
}
.upload label {
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
cursor: pointer;
}
#preview {
width: 200px;
height: 200px;
display: none;
}
.upload input[type="file"]:focus + label, .upload input[type="file"]:hover + label {
background-color: #f5f5f5;
}
/* JS代碼 */
var file = document.getElementById('file');
var preview = document.getElementById('preview');
file.onchange = function() {
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function() {
preview.src = reader.result;
preview.style.display = 'block';
}
}

以上代碼實(shí)現(xiàn)了一個(gè)上傳單張圖片的功能。上傳區(qū)域設(shè)置為一個(gè)200x200的div，并將input[type="file"]標(biāo)簽設(shè)置為絕對(duì)定位，使其始終在div容器內(nèi)。然后，在label標(biāo)簽上觸發(fā)點(diǎn)擊事件來選擇圖片文件。

通過使用FileReader對(duì)象，我們可以在初始情況下隱藏的img標(biāo)簽中預(yù)覽所選的圖片文件。讀取文件并使用DataURL方法將文件內(nèi)容轉(zhuǎn)換為base64編碼的字符串，然后將該字符串設(shè)置為img標(biāo)簽的src屬性。最后，將img標(biāo)簽的display屬性設(shè)置為“block”，使其可見。

CSS上傳單張圖片是一種簡(jiǎn)單而強(qiáng)大的解決方案，它可以方便地在網(wǎng)頁(yè)中上傳圖片。通過了解實(shí)現(xiàn)細(xì)節(jié)，可以讓您在實(shí)際應(yīng)用中更好地使用。