HTML5拍照上傳是通過瀏覽器的API實現的,使得手機和電腦等設備能夠直接拍攝照片并上傳。以下是一段HTML5拍照上傳代碼的示例:
使用HTML5拍照上傳
<input type="file" accept="image/*" capture="camera" id="cameraInput" /> <img src="#" alt="拍照預覽" id="preview" /> <script> var input = document.getElementById("cameraInput"); var preview = document.getElementById("preview"); input.onchange = function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (event) { preview.src = event.target.result; } }; </script>以上代碼通過<input>標簽設置type為file,接受image類型的上傳;同時設置capture屬性為camera,調用攝像頭進行拍照操作。在腳本中,監聽input的change事件,獲取選中的文件,并使用FileReader實現在前端預覽圖片。 HTML5拍照上傳的實現方法簡單易用,可以方便快捷地實現移動端拍照上傳等場景的需求。
下一篇第十一章CSS盒子