HTML5圖片上傳的代碼
HTML5為網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)者提供了一種簡(jiǎn)單而強(qiáng)大的方法,使用戶(hù)可以輕松上傳和共享圖片。通過(guò)HTML5,我們可以直接在頁(yè)面上上傳圖片,而不需要使用Flash或Java等插件。下面就是一個(gè)基本的HTML5圖片上傳的代碼。
使用HTML5上傳圖片:
<input type="file" accept="image/*" onchange="preview_image(event)">這段代碼通過(guò)Input標(biāo)簽的type屬性設(shè)置為file,用戶(hù)可以從本地上傳任何類(lèi)型的文件。通過(guò)accept屬性設(shè)置為image/*,限制了上傳文件的類(lèi)型只能是圖片。 onchange屬性會(huì)在用戶(hù)選擇文件后自動(dòng)觸發(fā)preview_image函數(shù)。它會(huì)傳遞一個(gè)事件對(duì)象作為參數(shù),我們可以使用該事件獲取已選擇的圖片。
預(yù)覽圖片:
function preview_image(event) { var reader = new FileReader(); reader.onload = function() { var output = document.getElementById('output_image'); output.src = reader.result; } reader.readAsDataURL(event.target.files[0]); }在這段代碼中,我們使用FileReader對(duì)象讀取選擇的文件。一旦讀取完成,它會(huì)觸發(fā)onload事件。我們通過(guò)output_image的ID獲取圖片的img標(biāo)記,并將讀取的結(jié)果指定為其src屬性。
顯示圖片:
<img id="output_image" width="300" height="300" alt="preview image">通過(guò)上面這段代碼,我們創(chuàng)建了一個(gè)img標(biāo)簽用于顯示預(yù)覽的圖片。當(dāng)我們上傳圖片時(shí),它將直接在頁(yè)面上顯示出來(lái)。 通過(guò)以上代碼,我們就成功地實(shí)現(xiàn)了HTML5圖片上傳的功能。這是一個(gè)簡(jiǎn)單的示例,你可以根據(jù)自己的需要修改和擴(kuò)展該代碼,以達(dá)到更加豐富和完整的功能。