html, js) input 파일 업로드 시 이미지 미리보기

 

---

크롬 / 이클립스 / 오라클 DB

 

---

1.  파일 업로드를 만듦

 

<input type="file" accept="image/*" onchange="setPreviewImg(event);">

 

---

2. 업로드 하면 이미지가 보인다.

 

 

function setPreviewImg(event){
	
	var reader = new FileReader();
	
	var imgpreview = document.querySelector("div#imgPreview");
	
	reader.onload = function(event){
	var img = document.createElement("img");
		img.setAttribute("src",event.target.result);
		img.setAttribute("class","imgV");
		imgpreview.appendChild(img);
	};
	
	reader.readAsDataURL(event.target.files[0]);

*div를 만들어 놓고 그 안에 img태그를 생성할 것이다.
 이 코드를 한 참 본 것 같다.. 너무 생소해서 ㅎㅎㅎ

 

.imgV{
    width: 300px;
    height: 200px;
    object-fit: contain;
}

 

---

3. 파일 하나만 올라가게 하자

 

input type file로 구글링을 얼마나 많이 했는지..
업로드 제한에 대한 것은 너무 어렵고 또 j-query가 너무 많이 보였다..ㅠ

그래서 파일 하나가 더 업로드되면 confirm을 띄우고 확인을 누르면
img 태그가 한번 더 생성되고, 기존 img 태그를 지우는 if문을 썼다.

 

 

 

var imgV = document.getElementsByClassName("imgV");
	
	if( imgV.length > 0 ){
		var result = confirm("한개의 파일만 업로드 됩니다. 파일을 바꾸시겠습니까?");
			
		}
		
		if(result) {
			
			reader.onload = function(event){
		var img = document.createElement("img");
			img.setAttribute("src",event.target.result);
			img.setAttribute("class","imgV");
			
			imgpreview.firstChild.remove("imgV");
			imgpreview.appendChild(img);
			};
		}
}

 

 

---

3. 지우기 버튼을 누르면 img태그를 없애버림.

 

<button type="button" id="uploadDelBtn" onclick = "imgdel()"> 지우기 </button>

function imgdel(){
	
	var imgpreview = document.querySelector("div#imgPreview");
	imgpreview.firstChild.remove("imgV");
}

js를 잘 모르지만 지우기 버튼은 꼭 만들어 보고 싶었다.
첨부하려다가 안 하고 싶을지도 모르니까... 
reset을 넣어놓긴 했는데 콘텐츠 전체가 없어지면 안 되니까..

문제는 input에 파일명이 삭제가 안된다.

js에서 이것을 지우려면 value는 못쓰고
(value에 빈 문자열 넣으려다 절망)
element.select()
document.selection.clear();
코드를 봤는데.. 이거.. 내가 쓰는 버전이 안 맞는 것 같다.. 

.createElement()
'생성'이 있으면 '소멸'도 있겠다 싶었다.

 

---

4. input 안 파일명 문제? 아예 안 보이게~

 

 

 

<button type="button" id="uploadDelBtn" onclick = "imgdel()"
  style="display : none";> //디스플레이 추가
  지우기 </button>
label for="uploadDelBtn" class="uploadlabel"> 지우기 </label>

 

주황색으로 체크한 것이 label이고 style="cursor: pointer;"를 주면

마우스 커서를 손가락 모양으로 바뀌어 클릭을 유도할 수 있다.

 

 

 

---

 

어찌 됐든 작동하니 마음은 시원하다.
java에 j를 알까 말까 해도.. javascript에 j도 같이 알아야 하겠다.

 

 

 

FileReader()

https://www.javascripture.com/FileReader

FileReader JavaScript API

 

 

 

input type="file"

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file

<input type="file"> - HTML: Hypertext Markup Language | MDN