HTML5是最新的HTML標(biāo)準(zhǔn),它提供了很多新的特性,其中包括照片上傳。下面是一個(gè)HTML5照片上傳的代碼示例:
<input type="file" id="inputImage" accept="image/*" /><img id="previewImage" src="" /><script>var inputImage = document.getElementById('inputImage'); var previewImage = document.getElementById('previewImage'); inputImage.addEventListener('change', function(){ var file = this.files[0]; var reader = new FileReader(); reader.addEventListener("load", function(){ previewImage.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } }, false); </script>
上面的代碼創(chuàng)建了一個(gè)包含類型為file的input元素,用于上傳圖像文件。接下來(lái)是一個(gè)圖像元素,在文件上傳后,該元素將被更新以顯示上傳的圖像。
然后通過(guò)JavaScript為input元素添加change事件監(jiān)聽器。當(dāng)用戶選擇文件并上傳時(shí),該事件將被觸發(fā),這將觸發(fā)一個(gè)函數(shù),該函數(shù)使用FileReader API讀取上傳的文件。該函數(shù)將讀取的圖像數(shù)據(jù)轉(zhuǎn)換為可用于圖像元素src屬性的URL,并將其設(shè)置為預(yù)覽圖像元素的src屬性。
這就是HTML5的照片上傳代碼示例!它很簡(jiǎn)潔, 基本上只使用了HTML5和JavaScript,所以它在大多數(shù)現(xiàn)代瀏覽器中都能夠很好地工作。
上一篇html5愛心特效代碼
下一篇html5照片輪播的代碼