투케이2K

43. (html/css/javascript/jquery) input file 및 FileReader 사용해 이미지 사진 업로드 수행 실시 본문

FrontEnd

43. (html/css/javascript/jquery) input file 및 FileReader 사용해 이미지 사진 업로드 수행 실시

투케이2K 2021. 7. 14. 10:29

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

<!DOCTYPE HTML>
<!-- 자바스크립트 차단된 콘텐츠 자동 허용 실시 -->
<!-- saved from url=(0013)about:internet -->

<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>		    			 	    	

		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;	
			
			/* 스크롤바 표시 지정 */
			overflow : auto;					
		}
		
		

		/* body 스크롤바 메인 스타일 지정 */
		body::-webkit-scrollbar {
			/* 스크롤바 너비 지정 */
			width: 10px;
			
			/* 스크롤바 배경 색상 지정 */
			background-color: #c1c1c1;
		}
		/* body 스크롤바 thumb 스타일 지정 */
		body::-webkit-scrollbar-thumb {					
			/* 스크롤바 thumb 색상 지정 */
			background-color: #444444;
		}



		/* 이미지 레이아웃 스타일 지정 */
		#image-container {
			width : 40%;
			height : 50%;
			margin : 0 auto;
			padding : 0;
			border : 2px solid #000000;
			background-color : #ffffff;			
			border-radius : 20px;
			position: relative;
			top: 5%;
			left: 0%;
		}

		#preview-image {
			width : 100%;
			height : 100%;
			margin : 0 auto;
			padding : 0;			
			border-radius : 20px;
			position: relative;
			top: 0%;
			left: 0%;
		}



		/* input 레이아웃 스타일 지정 */
		#input-container {
			width : 40%;
			height : 10%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #ff00ff;			
			border-radius : 20px;
			position: relative;
			top: 10%;
			left: 0%;
		}

		#input-file-button {
			width : 100%;
			height : 100%;
			margin : 0 auto;
			padding : 0;

			border-radius : 20px;
			background-color: #FF6600;

			
			cursor: pointer;
			

			position: relative;
			top: 0%;
			left: 0%;

			display: table;
		}

		#input-txt {
			color: #ffffff;			
			text-align: center;
			font-size: 150%;
			font-weight: bold;

			display: table-cell;
			vertical-align: middle;
		}	




		/* delete 레이아웃 스타일 지정 */
		#delete-container {
			width : 40%;
			height : 10%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #999999;			
			border-radius : 20px;
			position: relative;
			top: 13%;
			left: 0%;

			cursor: pointer;
			display: table;
		}

		#delete-txt {
			color: #ffffff;			
			text-align: center;
			font-size: 150%;
			font-weight: bold;

			display: table-cell;
			vertical-align: middle;
		}
  
		      				                          
    </style>


    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
    	2. document.getElementById : 특정 객체 id 를 설정합니다
    	3. addEventListener : 특정 객체에 이벤트를 부여합니다
    	4. readAsDataURL : 파일을 읽습니다
    	5. reader.onload : 파일을 정상적으로 읽은 경우를 나타냅니다
    	*/

   	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log(""); 

    		// [input 에 이벤트 부여 실시]
    		const inputImage = document.getElementById("input-image");
    		inputImage.addEventListener("change", readImage, false);
    	};



    	/* [업로드 이벤트 수행 함수] */
    	function readImage(evt){
    		console.log("");
    		console.log("[readImage] : [start]"); 
    		console.log("");

    		// 인풋 태그에 파일이 있는 경우
    		if(evt.target.files && evt.target.files[0]) {
    			console.log("");
	    		console.log("[readImage] : [reader]"); 
	    		console.log("");

    			// FileReader 인스턴스 생성
    			const reader = new FileReader();

    			// 이미지가 로드가 된 경우
    			reader.onload = function (e) {
    				const previewImage = document.getElementById("preview-image");
    				previewImage.src = e.target.result;
    				console.log("");
	    			console.log("[readImage] : [data] : " + previewImage.src); 
	    			console.log("");
    			}

    			// reader가 이미지 읽도록 하기
    			reader.readAsDataURL(evt.target.files[0]);
    		}
    	};




    	/* [삭제 이벤트 수행 함수] */
    	function deleteImage(evt){
    		console.log("");
    		console.log("[deleteImage] : [start]"); 
    		console.log("");

    		// 인풋 태그 src 값이 들어있는지 확인
    		const previewImage = document.getElementById("preview-image");
    		var data = previewImage.src;
    		console.log("");
    		console.log("[deleteImage] : [src] : " + data); 
    		console.log("");
    		
    		if(data != "undefined" && data != null && data != ""){
    			previewImage.src = "";
    		}

    	};
    	
    </script>

</head>


<body>

<!-- 이미지 레이아웃 -->
<div id="image-container">
	<!-- src 실제로 표시될 이미지 / [초기화] onerror src 에 표시할 이미지가 없을 경우 대체 표시 -->
	<img id="preview-image" 
		onerror="this.src='../WebProject/assets/image/sample_picture.png'"     
		src = "../WebProject/assets/image/sample_picture.png">    	
</div>


<!-- 업로드 레이아웃 -->
<div id="input-container" for="input-image">
	<!-- input display none 처리 >> label for 사용해 input 지정 후 스타일 커스텀 -->
	<label id="input-file-button" for="input-image"><p id="input-txt">업로드</p></label>
	<input id="input-image" type="file" style="display: none">   
</div>


<!-- 레이아웃 -->
<div id="delete-container" onclick="deleteImage();">
	<p id="delete-txt">초기화</p>
</div>

</body>

</html>

/* =========================== */

[결과 출력]

​

​

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. document.getElementById : 특정 객체 id 를 설정합니다

3. addEventListener : 특정 객체에 이벤트를 부여합니다

4. readAsDataURL : 파일을 읽습니다

5. reader.onload : 파일을 정상적으로 읽은 경우를 나타냅니다

*/

/* =========================== */

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

45. (html/css/javascript/jquery) 부트스트랩 (bootstrap) w 사용해 가로 (width) 크기 지정 실시  (0) 2021.07.19
44. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 사용해 button , div 스타일 css 적용 실시 및 다중 클래스 적용 설명  (0) 2021.07.16
42. (html/css/javascript/jquery) viewport media 뷰포트 미디어 쿼리 반응형 기본 코드 작성  (0) 2021.07.12
41. (html/css/javascript/jquery) body overflow , touchmove 사용해 스크롤 (scroll) 막기 및 허용 실시  (0) 2021.07.02
40. (html/css/javascript/jquery) keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법  (0) 2021.07.01
'FrontEnd' Related Articles more
Comments