이번에는 화면 측(Front-End)에서 구현된 멀티파트 업로드와 다운로드에 대해서 알아보자. 코드들은 HTML5 기준으로 작성하였다. 웹에서 멀티파일 업로드/다운로드를 구현하려면 별도의 모듈을 사용해야 한다. 하지만 HTML5가 등장하고 나서 HTML과 JavaScript만으로 구현이 가능해졌다.
먼저 멀티파일 업로드를 살펴보자.
file 타입의 입력항목에 multiple 속성을 정의하면 기능을 구현할 수 있다.
<input id="files-upload" type="file" multiple>
아래는 멀티파트 업로드 HTML소스다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>멀티파일 업로드</title>
</head>
<body>
<form id="test">
<fieldset>
<legend>멀티파일 업로드</legend>
<input id="files-upload" type="file" multiple><br>
<br> <input type="submit" value="업로드">
</fieldset>
</form>
</body>
</html>
아래는 처음 표시되는 화면이다.
파일선택을 클릭하면 파일선택이 가능한 열기창이 표시된다.
열기에서 1.txt와 2.txt 두 파일을 선택했다. 그리고 버튼을 클릭하면...
아래와 같이 파일선택 버튼 옆에 "파일 2개" 하고 표시된다.
참고로 하나의 파일을 선택할 경우에는 그 파일명이 표시된다.
업로드를 클릭하면 서버로 선택한 파일을 전송한다.
서버에서는 요청스트림에서 파일 데이터를 받아 서버에 저장하면 된다.
아래는 멀티파트 다운로드 HTML소스다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>멀티파일 다운로드</title>
<script src="multiFileDown.js"></script>
</head>
<body>
<form id="test">
<fieldset>
<legend>멀티파일 다운로드</legend>
<div>
<input type="checkbox" name="file1" id="file1" value="/test1.zip" />
<label for="file1">test1.zip</label>
</div>
<div>
<input type="checkbox" name="file2" id="file2" value="/test2.zip" />
<label for="file2">test2.zip</label>
</div>
<div>
<input type="checkbox" name="file3" id="file3" value="/test3.zip" />
<label for="file3">test3.zip</label>
</div>
<div>
<input type="checkbox" name="file4" id="file4" value="/test4.zip" />
<label for="file3">test4.zip</label>
</div>
<br>
<div>
<input type="button" value="Download All" onclick="suffix=1;downloadAll(this.form);return false" />
</div>
</fieldset>
</form>
</body>
</html>
멀티파트 다운로드 JavaScript 코드다. 선택한 파일들을 다운로드한다.
var suffix = 1;
function downloadAll(oFrm) {
var oChk = oFrm.elements["file" + (suffix++)];
if (oChk) {
if (oChk.checked) {
location.href = "http://oneway.com/files/test/" + oChk.value;
setTimeout(function() {
downloadAll(oFrm)
}, 1000);
} else {
downloadAll(oFrm);
}
}
}
아래는 처음 표시되는 화면이다.
test1.zip, test2.zip, test3.zip 파일을 선택하였다.
test4.zip가 화면에는 보이지만 해당사이트에 test4.zip 파일은 존재하지 않아 다운로드되지 않는다.
Download All 버튼을 클릭하면 순차적으로 파일을 다운로드한다.
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] 학습정리 - 2.자바스크립트의 역사 (0) | 2023.03.01 |
|---|---|
| [JavaScript] 학습정리 - 1.자바스크립트 소개 (0) | 2023.03.01 |
| [JavaScript] 수많은 프로젝트에서 발생하는 상위 오류 10가지 (0) | 2023.03.01 |
| [JavaScript] Blackbird - 자바스크립트 개발 디버깅 도구 (0) | 2023.03.01 |
| [JavaScript] 자바스크립트 프레임워크 (0) | 2023.03.01 |
댓글