이 글에서는 주로 HTML에서 이미지를 선택하고 직접 미리 보는 코드를 공유합니다. 이 글의 코드를 사용하여 HTML에서 이미지를 선택하고 직접 미리 보는 효과를 얻을 수 있기를 바랍니다.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>选择图片并预览</title> <script type="text/javascript"> function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE url = document.getElementById(sourceId).value; } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } function preImg(sourceId, targetId) { var url = getFileUrl(sourceId); var imgPre = document.getElementById(targetId); imgPre.src = url; } </script> </head> <body> <p> <br /> <br /> <a>上传者:<input type="text" /></a> <br /> <br /> <form action=""> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'photo');" /> <br /> <br /> <img id="photo" src="" width="300px" height="300px" style="display: block;" /> </form> </p> </body> </html>
관련 추천:
입력 유형=파일 사진 선택 및 미리보기 효과 얻기에 대한 자세한 설명
위 내용은 HTML로 그림을 선택하고 구현 코드를 직접 미리 봅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!