input 태그에서 선택한 이미지를 화면에 바로 출력하도록 해보자.
코드
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>썸네일 만들기</title> </head> <body> <input type="file" id="image" accept="image/*" onchange="setThumbnail(event);"/> <div id="image_container"></div> <script> function setThumbnail(event) { var reader = new FileReader(); reader.onload = function(event) { var img = document.createElement("img"); img.setAttribute("src", event.target.result); document.querySelector("div#image_container").appendChild(img); }; reader.readAsDataURL(event.target.files[0]); } </script> </body> </html>input 태그에서 onchange 속성에 실행될 메소드를 정해줍니다.
메소드 내에서 FileReader 객체를 생성하고 onload 됐을 시 발생할 이벤트를 작성해줍니다.
FileReader 가 로드 됐을 때 img 엘리먼트를 생성하고 src 속성을 설정해줍니다.
그리고 이미지가 들어갈 div에 넣어줍니다.
리더에서 input 태그에서 선택한 파일을 읽어오도록 설정합니다.
실행 화면
여러 이미지 미리보기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>썸네일 만들기</title> </head> <body> <input type="file" id="image" accept="image/*" onchange="setThumbnail(event);" multiple/> <div id="image_container"></div> <script> function setThumbnail(event) { for (var image of event.target.files) { var reader = new FileReader(); reader.onload = function(event) { var img = document.createElement("img"); img.setAttribute("src", event.target.result); document.querySelector("div#image_container").appendChild(img); }; console.log(image); reader.readAsDataURL(image); } } </script> </body> </html>input 태그에 multiple 속성을 추가해주었고
setTumbnail 메소드 안에서 반복문을 돌려서 미리보기를 설정합니다.
html 구조
<div class="img_wrap"> <img src="abc01.jpg" alt="큰이미지" id="big"> <div class="small_img_wrap"> <img src="abc01.jpg" alt="작은이미지1" class="simg"> <img src="abc02.jpg" alt="작은이미지2" class="simg"> <img src="abc03.jpg" alt="작은이미지3" class="simg"> </div> </div>javascript
var bigImg = document.querySelector('#big'); //큰 이미지 가져오기 var sImg = document.querySelectorAll('.simg'); //작은 이미지들 노드 리스트로 가져옴 for(var i = 0; i < sImg.length; i++) { sImg[i]. title = showImg; //노드를 클릭하면 showImg 함수 실행 } function showImg() { var newImg = this.src; //클릭 이벤트가 발생한 대상의 src 속성 값을 가져옴 bigImg.setAttribute('src', newImg); //newImg 값을 큰 이미지의 src 속성 값에 할당 //또는 big.src = newImg; 도 가능 } //또는 함수 실행하지 않고 하는 방법 for(var i = 0; i < sImg.length; i++) { sImg[i]. title = function(e) { bigImg.src = this.src; }; };코드 예제
js 이미지 가져 오기 src
var youtubeimgsrc = document.getElementById("youtubeimg").src;js 를 통해 html 에서 다른 이미지를 설정하는 방법
<div id="x"></div> <script> var img = document.createElement("img"); img.src = "image.png"; var src = document.getElementById("x"); src.appendChild(img); </script>js url 에서 이미지 가져 오기
var elements = []; function loaded(){ console.log("you have loaded an image"); } CreateFileFrom("your/dir/here/img.png"); function CreateFileFrom(dir){ /* defining runtime variables */ var extension = dir.split('.').pop(); var keys = {"png":"IMG","jpg":"IMG","jpeg":"IMG", "js":"SCRIPT","json":"SCRIPT", "mp3":"AUDIO","wav":"AUDIO"}; var obj = document.createElement(keys[extension]) || {}; obj.src = dir; /* onload function called when the resource is loaded */ obj.onload = (e) => { elements.push(e.path[0]); loaded() } /* make sure that the data is compitable */ if(keys[extension]==null){console.error("not supported media type "+extension);return;} }비슷한 페이지
예제가있는 유사한 페이지
다른 언어로
이 페이지는 다른 언어로되어 있습니다
empty row
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
이 카테고리에서 인기
카테고리에 예제가 포함 된 인기있는 페이지
empty row