자바스크립트 - 파일 File

프로그래밍/JavaScript 자바스크립트 2021. 10. 6.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function checkFilesize(file) {
	var maxSize = 10*1024*1024; // 10M
	var fileSize = file.files[0].size;
	
	console.log(fileSize+" bytes.");
	
	return maxSize >= fileSize;
}

function send() {
	var f = document.myForm;
	
	if(! f.selectFile.value) {
		alert("파일을 선택하세요...");
		f.selectFile.focus();
		return;
	}
	
	if(! checkFilesize(f.selectFile) ) {
		alert("파일은 최대 10M까지 업로드 가능합니다.");
		f.selectFile.focus();
		return;
	}
	
	alert("서버 전송...");
}
</script>

</head>
<body>

<h3>파일 용량 체크</h3>

<form name="myForm">
	<p> <input type="file" name="selectFile"> </p>
	<p>
		<button type="button" onclick="send();">등록하기</button>
	</p>
</form>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>File List</h3>

<p>
    <input type="file" multiple="multiple" id="myfiles">
</p>

<script type="text/javascript">
var fileList = function(){
	var fileInput = document.querySelector("#myfiles");
	var files = fileInput.files;
	
	for(var i=0; i<files.length; i++) {
		var f = files[i];
		console.log(f.name); // 파일 이름
	}
};

document.querySelector("#myfiles").onchange = fileList;
</script>

</body>
</html>

업로드 파일이 단일일 경우와 여러개일 경우 비교하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function readFile(inputs) {
	if(! inputs.value) {
		return;
	}
	
	var f = inputs.files[0];
	var reader = new FileReader(); // 파일의 내용을 읽을 수 있는 기능 제공
	reader.onload = function(e) { // 읽어 들이기에 성공할때 호출되는 이벤트 핸들러
		console.log(e.target.result); // result : 파일의 내용
	};
	reader.readAsText(f); // utf-8
	// reader.readAsText(f, "euc-kr"); // euc-kr
}
</script>

</head>
<body>

<h3> text File 읽기 </h3>

<div>
	<form name="frm">
		<p>
			<input type="file" name="selectFile" accept="text/*"
				onchange="readFile(this)">
		</p>
	</form>
</div>

</body>
</html>

이건 텍스트 파일만 가능하다.

파일을 읽어와서 콘솔창에 텍스트 파일의 내용을 뿌리는 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
.image-preViewer{
	width: 200px; height: 200px; margin-top: 5px; margin-bottom: 5px;
}

.image-preViewer img {
	max-width: 100%;
}
</style>

<script type="text/javascript">
function isVaildImageFile(filename) {
	var p = /(\.gif|\.jpg|\.jpeg|\.png)$/i;
	return p.test(filename);
}

function imagePreview(inputs) {
	var f = inputs.files[0];	
	// 이미지 파일이 아닌 경우
	if(! f.type.match("image.*")) {
		inputs.focus();
		return;
	}
	
	var reader = new FileReader();
	reader.onload = function(e) {
		document.getElementById("imgPreView").setAttribute("src", e.target.result);
	};
	reader.readAsDataURL(f);
}

function sendOk() {
	var f = document.frm;
	
	if(! f.selectFile.value) {
		alert("파일을 선택하세요");
		f.selectFile.focus();
		return;
	}
	
	if(! isVaildImageFile(f.selectFile.value) ) {
		alert("이미지 파일만 가능합니다.");
		f.selectFile.focus();
		return;
	}
	
	alert("ok");
}

</script>

</head>
<body>

<h3>이미지 미리보기</h3>

<div style="margin: 5px;">
	<form name="frm">
		<p>
		<!-- <input type="file" name="selectFile" onchange="imagePreview(this)">  -->
			<input type="file" name="selectFile" accept="image/*" onchange="imagePreview(this)">
		</p>
		<div class="image-preViewer">
			<img id="imgPreView">
		</div>
		<p>
			<button type="button" onclick="sendOk()">등록하기</button>
		</p>
	</form>
</div>

</body>
</html>

이미지 파일만 올릴 수 있도록 input 옵션에 accept="image/*" 를 줬다 역시 정규식을 사용해서 *으로 인해

이미지 파일이지만 모든 타입의 이미지 파일을 허용하게 했다.

그리고 이미지 미리보기 기능을 위해서

파일 객체 reader가 로드가 되면 function(e) 함수 이벤트를 실행하게 했는데,

문서내 엘리먼트의 아이디가 imgPreView인 애한테 어트리트뷰트셋(속성 설정) 해주는 것

그리고 그 읽어온 이벤트 결과를 보낸다는 뜻

.readAsDataURL(f); 는 img의 scr을 URL로 지정해주겠다는 뜻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>localStorage</h3>
<p>
 - 데이터 보존기간에 제한 없음<br>
 - 도메인당 하나가 생성<br>
 - 쿠키를 이용한 설정을 대신하기 적당
</p>

<p>
	<button type="button" onclick="clickCount()">카운트증가</button>
	<button type="button" onclick="deleteCount()">삭제</button>
</p>
<hr>
<div id="log"></div>


<script type="text/javascript">
viewCount();

function clickCount() {
	// Storage를 지원하지 않으면
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	// 웹 스트로지 값 가져오기
	var cnt = localStorage.count; // count는 내가 웹 스트로지에 저장할때 사용한 이름
	// var cnt = localStorage.getItem('count');
	
	if(cnt) {
		cnt = Number(cnt) + 1;
	} else {
		cnt = 1;
	}
	
	// 웹 스트로지에 count라는 이름으로 저장
	localStorage.count = cnt;
	// localStorage.setItem("count", cnt);
	
	viewCount();
}

function deleteCount() {
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	delete localStorage.count;
	
	viewCount();
}

function viewCount() {
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	var cnt = localStorage.count;
	cnt = cnt ? cnt : "";
	document.getElementById("log").innerHTML = "카운터의 현재 횟수 : " + cnt;
}
</script>

</body>
</html>

웹 스트로지는 쿠키랑 비슷한 역할을 하는데 브라우저 창을 닫아도 작업했던 내용이 로컬에(내컴) 저장을 해놔서

나중에 다시 창 켰을때 불러오는 역할

여기서는 cnt 변수를 저장했다가 나중에 다시 껏다켜도 기존의 작업 했던 걸 살려볼거다

카운트 증가를 위해 함수를 만든다.

localStorage.count 여기서 count는 로컬에 저장할때 사용할 이름임

을 var cnt에 넣어줘서 cnt를 로컬스토리지로 만든다.

그리고 카운트를 눌렀을때 cnt를 올리고 마지막에 올라간 값이 저장되어있는 cnt를 다시 로컬에 저장시킨다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>sessionStorage</h3>
<p>
 - 한번의 세션 동안만 유지<br>
 - 유효범위와 보존기간이 있다.<br>
 - 같은 브라우저도 새로 생성되는 창에서는 세션이 달라 다른 스트로지를 가진다.<br>
 - 도메인마다 따로 생성된다.<br>
</p>

<p>
	<button type="button" onclick="clickCount()">카운트증가</button>
	<button type="button" onclick="deleteCount()">삭제</button>
</p>
<hr>
<div id="log"></div>


<script type="text/javascript">
viewCount();

function clickCount() {
	// Storage를 지원하지 않으면
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	// 웹 스트로지 값 가져오기
	var cnt = sessionStorage.count; // count는 내가 웹 스트로지에 저장할때 사용한 이름
	// var cnt = sessionStorage.getItem('count');
	
	if(cnt) {
		cnt = Number(cnt) + 1;
	} else {
		cnt = 1;
	}
	
	// 웹 스트로지에 count라는 이름으로 저장
	sessionStorage.count = cnt;
	// sessionStorage.setItem("count", cnt);
	
	viewCount();
}

function deleteCount() {
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	delete sessionStorage.count;
	
	viewCount();
}

function viewCount() {
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	var cnt = sessionStorage.count;
	cnt = cnt ? cnt : "";
	document.getElementById("log").innerHTML = "카운터의 현재 횟수 : " + cnt;
}
</script>

</body>
</html>

세션스토리지는 로컬과는 다르게 한번의 세션만 유지된다. 창을 닫으면 사라진다는 뜻

// 키에 데이터 쓰기
localStorage.setItem("key", value)
// 키로 부터 데이터 읽기
localStorage.getItem("key")
// 키의 데이터 삭제
localStorage.removeItem("key")
// 모든 키의 데이터 삭제
localStorage.clear()
// 저장된 키/값 쌍의 개수
localStorage.length

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>localStorage</h3>

<p>
	<input type="text" id="subject" placeholder="좋아하는 과목">
	<button type="button" onclick="addLog()">추가</button>
	<button type="button" onclick="deleteLog()">삭제</button>
</p>
<div id="log"></div>

<script type="text/javascript">
viewLog();

function viewLog() {
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	var ss = JSON.parse(localStorage.getItem("subject")) || [];
	var s = ss.join();

	document.getElementById("log").innerHTML = "좋아하는 과목 : " + s;
}

function addLog() {
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	var s = document.getElementById("subject").value.trim();
	if(! s) {
		return;
	}
	
	var ss = JSON.parse(localStorage.getItem("subject")) || [];
	
	ss.push(s);
	localStorage.setItem("subject", JSON.stringify(ss));
	
	viewLog();
	
	document.getElementById("subject").value = "";
}

function deleteLog() {
	if(typeof(Storage) === "undefined") {
		return;
	}
	
	delete localStorage.removeItem("subject");
	viewLog();
}
</script>

</body>
</html>

viewLog 메소드는 말 그대로 보기 위한거니까 getItem을 통해서 데이터를 읽어온다.

JSON데이터는 자바스크립트 객체 만들거나 저장할때, 배열에 주로 쓴다.

addLog에서는 자바스크립트에서 작성한걸 로컬스토리지에 저장해야하는데 로컬스토리지는 String 객체만 저장하기 때문에 자바스크립트에서 JSON형식으로 바꿔야하고 반대로도 가져올때 또 바꿔야한다

자바스크립트 -> JSON = JSON.stringify()

JSON -> 자바스크립트 = JSON.parse()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
.list li {
	cursor: pointer;
}

.list li:hover:after, .list li.chk:after {
	content: '\2605';
	color: tomato;
}

.list li.chk:hover:after {
	content: '\2605';
}
</style>

</head>
<body>

<h3>localStorage 예제</h3>

<ul class="list">
	<li id="java">자바</li>
	<li id="oracle">Oracle</li>
	<li id="html">HTML</li>
	<li id="javascript">자바스크립트</li>
	<li id="spring">스프링</li>
	<li id="css">css</li>
</ul>

<script type="text/javascript">
	var progs = JSON.parse(localStorage.getItem("progs")) || [];
	
	progs.forEach(function(data){
		document.getElementById(data).className = "chk";
	});
	
	document.querySelector(".list").addEventListener("click", function(e){
		var id = e.target.id;
		var item = e.target;
		var index = progs.indexOf(id);
		
		if(index == -1) {
			progs.push(id);
			item.className = "chk";
		} else {
			progs.splice(index, 1);
			item.className = "";
		}
		
		localStorage.setItem("progs", JSON.stringify(progs));
	});
</script>


</body>
</html>

foreach는 Array객체에서만 사용가능한 메소드

배열의 요소들을 반복해서 작업을 할 수 있음.

받은 인자 data의 클래스이름을 chk로 바꿔버려서 마우스가 올라가는 애들에게 다른 CSS 변화를 줄것임.

쿼리셀렉터로 리스트 클래스를 받고있는 애들한테 클릭시 이벤트리스너로 이벤트 등록을 하고 e함수 실행

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">

.container {
	width: 500px;
	margin: 30px auto;
	
}

.image-container {
	display: grid;
	grid-template-columns : repeat(3, 1fr);
	grid-gap : 5px;
	width: 450px;
	margin: 10px 0;
	
}

.image {
	width: 150px;
	height: 100px;
}

</style>

<script type="text/javascript">

function imageFilePreView(input) {
	const $div = document.querySelector(".image-container");
	
	if(input.files) {
		const arr = Array.from(input.files);
		
		arr.forEach((file, index) => {
			const reader = new FileReader();
			const $img = document.createElement("img");
			$img.classList.add("image");
			
			
			reader.onload = e => {
				$img.src = e.target.result;
			};
			
			reader.readAsDataURL(file);
			$div.appendChild($img);
			
		});
	}
	
}



</script>
</head>
<body>

<div class="container">
	<form action="" name="frm">
		<p>
			<input type="file" name="selectFile" accept="image/*" multiple="multiple" 
				onchange="imageFilePreView(this);">
		</p>
		<div class="image-container"></div>
		<p>
			<button type="button" onclick="sendOk()">등록하기</button>
		</p>
	</form>
</div>

</body>
</html>

이미지 미리보기 여러개 등록 하는 법

HTML 에선 multiple 옵션을 꼭 줘야한다.(그래야 여러 이미지 동시 선택가능)

파일이 여러개니까 배열로 처리해야함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>image preview</title>
<style>
.container {
	margin: 30px auto;
	width: 500px;
}

#image_zone {
  width: 660px;
  min-height: 150px;
  padding: 10px;
  border: 1px dotted #00f;
  margin-top: 5px;
}

#image_zone:empty:before {
  content: attr(data-placeholder);
  color: #999;
  font-size: .9em;
}

.image-box {
	display: inline-block;
	position: relative;
	width: 150px; height: 120px;
	margin: 5px;
	border: 1px solid #00f;
	z-index: 1;
}

.image {
	width: 100%; height: 100%;
	z-index: none;
}

.image-btn {
	/* width:30px; height:30px; */
	position: absolute;
	font-size: 15px;
	right: 0px;
	bottom: 0px;
	z-index: 999;
	background-color:rgba(255,255,255,0.1);
	color: #f00;
	border: 1px solid #333;
	cursor: pointer;
	padding: 2px 5px;
}
</style>
</head>
<body>

<div class='container'>
	<h3>이미지 미리보기</h3>
	<form name="frm">
		<input type='file' name='selectFile' id='selectFile' multiple='multiple'>
		<div id='image_zone'
			data-placeholder='파일을 첨부 하려면 파일 선택 버튼을 클릭하거나 파일을 드래그앤드롭 하세요'></div>
	</form>
</div>

<script type="text/javascript">
( /* vid : 이미지들이 들어갈 위치 id, fid : file 태그 id */
	imageView = function imageView(vid, fid) {
		var imageZone = document.getElementById(vid);
		var selectFile = document.getElementById(fid);
		var sel_files = [];
    
		selectFile.onchange = function(e){
			var files = e.target.files;
			var fileArr = Array.prototype.slice.call(files) // begin부터 end-1 인덱스 까지 요소를 얕은 복사하여 새로운 배열 객체로 반환
			for(f of fileArr) {
				imageLoader(f);
			}
		}; 
  
		// 탐색기에서 드래그앤 드롭 사용
		
		// 드롭 대상 위로 지나갈 때
		imageZone.addEventListener('dragenter', function(e) {
			e.preventDefault();
			e.stopPropagation();
		}, false);
    	
		// 드롭 대상위로 지나갈때
		imageZone.addEventListener('dragover', function(e) {
			e.preventDefault();
			e.stopPropagation();
		}, false);
  		
		// 드래그 할때
		imageZone.addEventListener('drop', function(e) {
			var files = {};
			e.preventDefault();
			e.stopPropagation();
			var dt = e.dataTransfer;
			files = dt.files;
			for(f of files) {
				imageLoader(f);
			}
		}, false);
    
	    // 첨부된 이미지를 배열에 넣고 미리보기
		var imageLoader = function(file){
			sel_files.push(file);
			var reader = new FileReader();
			reader.onload = function(e) {
				let img = document.createElement('img')
				img.classList.add("image"); // class 추가
				img.src = e.target.result;
				imageZone.appendChild(makeDiv(img, file));
			};
	      
			var dt = new DataTransfer();
			for(f in sel_files) {
				var file = sel_files[f];
				dt.items.add(file);
			}
			selectFile.files = dt.files;
			
			reader.readAsDataURL(file);
		};
    
		// 첨부된 파일이 있는 경우 button과 함께 imageZone에 추가할 div를 만들어 반환
		var makeDiv = function(img, file) {
			var div = document.createElement('div');
			div.classList.add("image-box");
      
			var btn = document.createElement('input');
			btn.setAttribute('type', 'button');
			btn.setAttribute('value', 'x');
			btn.setAttribute('delFile', file.name);
			btn.classList.add("image-btn");
			btn.onclick = function(ev){
				var ele = ev.srcElement;
				var delFile = ele.getAttribute('delFile');
				for(var i=0 ;i<sel_files.length; i++){
					if(delFile === sel_files[i].name){
						sel_files.splice(i, 1);      
					}
				}
        
				var dt = new DataTransfer();
				for(f in sel_files) {
					var file = sel_files[f];
					dt.items.add(file);
				}
				selectFile.files = dt.files;
				
				var p = ele.parentNode;
				imageZone.removeChild(p);
			};
			div.appendChild(img);
			div.appendChild(btn);
			return div;
		};
	}
)('image_zone', 'selectFile');
</script>
</body>
</html>

이미지 드래그 앤 드랍으로 처리하기

함수를 선언과 동시에 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var $videoId = "";

function play() {
	var url = document.getElementById("youtube-url").value.trim();
	if(! url) {
		document.getElementById("youtube-url").focus();
		return;
	}
	
	$videoId = url.substring(url.lastIndexOf('/') +1); 
	if(url.indexOf("=") > 0) {
		$videoId = url.substring(url.indexOf("=") + 1);
	}
	
	// youtube 실행
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";	

	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);	
}

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: $videoId,
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    //setTimeout(stopVideo, 6000);
    done = true;
  }
}
function stopVideo() {
  player.stopVideo();
}

</script>
</head>
<body>

<div style="width: 800px; margin: 30px auto; text-align: center;">
	<div style="margin: 10px; ">
		<input type="text" id="youtube-url">
		<button type="button" onclick="play();">확인</button>
	</div>
	<div id="player"></div>
</div>

</body>
</html>

HTML창에 유튜브 창 띄우기

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

sweetalert2 - alert창 관련 오픈소스 라이브러리 (0)	2023.11.22
자바스크립트 - 반응형 웹 (0)	2021.10.07
자바스크립트 - DOM (0)	2021.10.06
자바스크립트 - 정규식 (0)	2021.10.06
자바스크립트 - Form 폼 (양식) / 예제 (0)	2021.10.06

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바