input type="file" 파일 첨부, 삭제, 확장자, 용량 검사 기본

* 실제 input type="file" 항목은 숨김처리하고

별도로 input type="text" 와 찾아보기, 삭제 버튼을 추가하여 사용.

 

<input type="file" id="popupImgFile" name="popupImgFile" 
	title="" onchange="popupImgFileChange(this)" style="display:none;"/>
<input type="text" id="popupImgFile_text" name="popupImgFile_text" 
	title="" readonly="readonly" class="input_file" />

<a onClick="popupImgFileReg()" title="찾아보기" class="btn_type1">
	<span>찾아보기...</span>
</a>
<a onClick="popupImgFileRm()" title="삭제" class="btn_type1">
	<span>삭제</span>
</a>
<ul>
	<li class="desc">* 팝업 이미지는 jpg, png, gif 파일만 등록이 가능합니다.</li>
</ul>

//첨부파일 등록
function popupImgFileReg(){
 $('#popupImgFile').click();
}

//첨부파일 삭제
function popupImgFileRm(){
	$('#popupImgFile, #popupImgFile_text').val('');
}

//파일등록시 확장자 검사
function popupImgFileChange(obj){
	var fileNm = obj.value; 
	var maxSize = 10485760; //10mb
	var fileSize = 0; 
	if(fileNm != ''){
		fileSize = document.getElementById("popupImgFile").files[0].size;
	}
	if(fileNm != ''){
		var ext = fileNm.slice(fileNm.lastIndexOf(".")+1).toLowerCase();
		if(ext != 'jpg' && ext != 'png' && ext != 'gif'){
			alert('jpg, png, gif 파일만 등록이 가능합니다.');
			popupImgFileRm();
			return;
		}else if(fileSize > maxSize){
			alert('10MB 이하의 파일만 등록이 가능합니다.');
			popupImgFileRm();
			return;
		}else{
			$('#popupImgFile_text').val(fileNm);
		}
	}
}