[js] 자바스크립트 파일 업로드 확장자 제한 2가지 방법 (feat, 파일다운방법)

안녕하세요 오늘은 자바스크립트에서 파일을 업로드할때 확장자를 제한하는 방법에 대하여 포스팅합니다.

두가지 모두 사용하는게 좋을듯 합니다.

1. <input> 태그에 accept 사용하기

일차원적으로 input태그에 accept을 사용하면

<form action="/excelUpload" id="excelForm" name="excelForm" enctype="multipart/form-data" method="POST">
	<input type="file" id="fileInput" name="fileInput" accept=".xlsx">
</form>

^이렇게 형식이 Microsoft Excel Worksheet로 제한됩니다. 그런데 여기서 누군가가 하필이면

모든 파일을 선택하고 파일을 업로드할 가능성이 있기때문에 두번째 작업도 해줍니다.

 

2. 자바스크립트 사용하기

순서 : 파일 업로드를 클릭 > 업로드한 파일 확장자 검사 > 디비에 업로드

// 파일 업로드시 업로드된 파일들 정보 가져옴
//document.excelForm으로 되어있는데 여기서 excelForm은 <form>태그의 name 값입니다.
var fm = document.excelForm;
var fnm = fm.fileInput;
var filePath = fnm.value;

//마지막 네자리가 xlsx인지 확인후 이동
if(filePath.substr(filePath.length-4) == 'xlsx'){
// ajax 등으로 필요 작업 수행
}

 

(참고)

프로젝트내 존재하는 파일 다운로드는 

<a href ="/excel/example.xlsx" download id="exam"></a>

이렇게 a태그를 사용해서 간단히 주소만으로 다운할 수 있습니다. 유의할점은 download 를 사용한다는 것입니다.

감사합니다.

 

(수정)

시간이 오래지나면 실패 = 네트워크 오류로 나와서 찾아보니

 <a href ="<c:url value='/excel/example.xlsx'/>" id="exam"></a>

이렇게 jstl의 c:url 을 사용해서 하니 잘된다.

상단에

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

를 추가해준다.

c url 사용시 1. 로컬/서버 동적 path 생성 2. session 유지

만약 url에 session id 보이는게 싫다면 프로젝트의 web.xml에서 아래와같이 수정한다.

<session-config>
		<session-timeout>30</session-timeout>
		<tracking-mode>COOKIE</tracking-mode>
	</session-config>