13. [JavaScript] 파일 업로드 용량 체크하기

업로드 파일 용량 체크하기
* 원하는 기능
- 자바스크립트로 파일을 업로드 하기전에 용량 체크한다.
- 2MB 이하의 파일만 허용한다.
- 용량 제한에 걸리면 선택한 파일은 무시한다.

아래에서 파일을 직접 선택해 보세요.
2MB 이상인 파일일 경우 경고창이 뜹니다.

 

 

 

 

HTML

<input type="file" name="file1" onchange="checkFile(this)"><br>
<input type="file" name="file2" onchange="checkFile(this)"><br>
<input type="file" name="file3" onchange="checkFile(this)"><br>

 

 

JavaScript

function checkFile(el){
	// files 로 해당 파일 정보 얻기.
	var file = el.files;

	// file[0].size 는 파일 용량 정보입니다.
	if(file[0].size > 1024 * 1024 * 2){
		// 용량 초과시 경고후 해당 파일의 용량도 보여줌
		alert('2MB 이하 파일만 등록할 수 있습니다.\n\n' + '현재파일 용량 : ' + (Math.round(file[0].size / 1024 / 1024 * 100) / 100) + 'MB');
	}

	// 체크를 통과했다면 종료.
	else return;

	// 체크에 걸리면 선택된 내용 취소 처리를 해야함.
	// 파일선택 폼의 내용은 스크립트로 컨트롤 할 수 없습니다.
	// 그래서 그냥 새로 폼을 새로 써주는 방식으로 초기화 합니다.
	// 이렇게 하면 간단 !?
	el.outerHTML = el.outerHTML;
}