[Javascript] 자바스크립트(JS) file type을 버튼으로 변경하기

 

 

자바스크립트(Javascript) Button으로 파일 업로드

파일 업로드 시 대부분 input으로 type을 file로 처리하여 코드를 작성합니다. 하지만 이는 너무 단조로워 Button 형식으로 처리하게 되면 보기 좋은 웹 페이지를 생성할 수 있습니다.input type=file을 Button 형식으로 변경하는 방법을 알아보겠습니다.

 

제일 간단한 방법은 Button에 onclick 이벤트를 연결하는 방법입니다.

<div>
	<input type="file" id="file" name="file" style="display:none"/>
	<button type="button"  onclick="onclick=document.all.file.click()">Image</button>
</div>

 

조금 더 자세한 방법은 input에 onchang() 함수를 연결하는 방법입니다.

<div>
	<input type="file" id="file" name="file" onchange="uploadFile(this)" style="display:none"/>
	<button type="button" id="btn-add">Image</button>
</div>


<script type="text/javascript">
$('#btn-add').click(function (e) {
    e.preventDefault();
    $('#file').click();
});

function uploadFile(e){
	console.log("File Name : ", e.value);
}
</script>