http://web.kisa.or.kr/02/b/activeX_content02_a.jsp
-
HTML 4.X 및 XHTML 1.X 기술 사양은 정적인 웹 페이지를 제작하는데 중점을 두다보니, 사용자와 상호 작용하는데 중요한 웹 폼(form)의 기능이 상당히 빈약하다. 특히, 다중 파일을 업로드하는 기능을 지원하지 않고, 하나의 폼에 하나의 파일만 업로드할 수 있다.
이러한 기능 제약은 다수의 파일을 첨부하는 이메일 서비스 및 웹하드 서비스를 구현하는데 장애물이다. 사용자들이 매번 파일을 업로드해야 하는 불편함을 덜어주기 위해서, 개발자들은 액티브X 확장기능으로 다중 파일 업로드 기능을 구현하기 시작했고, 그 결과 국내 다수의 웹 메일 서비스나 웹하드 서비스는 물론이고, 다수의 사진이나 파일을 업로드 하는 블로그와 카페 서비스에도 액티브X 확장기능이 사용되고 있다.
또한, 파일을 선택해서 끌어다 놓아서(Drag and Drop) 파일을 이동․복사․삭제․편집 할 수 있는 데스크탑 운영체제 사용자 인터페이스(UI)를 웹에서도 동일하게 구현하기 위해서 액티브X 확장기능을 사용하고 있다.
이처럼, 사용자들이 웹을 단순히 소비하는 용도가 아닌 공유와 재생산하기 위한 용도로 사용하는 웹 폼의 사용자 인터페이스(UI) 및 사용자 경험(UX)을 향상시키기 위해 사용된 액티브X는 이제 HTML5와 관련 API로 대체해서 구현 할 수 있다. HTML5의 탄생 목적이 기존에 어렵고 복잡하게 구현하거나 액티브X 등 확장기능으로 구현하는 기술을 쉽고 빠르게 구현하기 위함이기 때문이다.
-
다중 파일 업로드
- 기존의 웹 폼(form)이 다중 파일을 업로드 할 수 있는 기능을 지원하지 않아서, 이를 액티브X 등 플러그인 프로그램으로 구현했다. HTML5에 추가된 File API는 다중 파일을 업로드하기 위한 간단 매서드를 제공하고 있으며, 이를 이용해서 보다 쉽고 빠르게 해당 기능을 구현할 수 있다.
<input id="files-upload" type="file" multiple><표36>다중 파일 업로드의 File API 태그파일 업로드 형식 웹 코드에 <표36>처럼 단순히 multiple이라는 속성을 추가해주기만 하면 된다.
이렇게 작성된 코드는 웹브라우저에 하나의 업로드 버튼만 출력한다. 이는 기존 액티브X 등 확장기능이 여러 개의 업로드 버튼을 제공해서 하나의 파일을 여러 차례 업로드하는 방식과 다르다.
<그림64>HTML5 다중파일 업로드 예제 화면HTML5에서는 <그림64>과 같이 다중 파일 업로드 버튼을 클릭하면,
<그림65>한 번에 여러 개 파일을 선택해서 업로드하는 화면<그림65>과 같이 여러 개의 파일을 동시에 선택해서 업로드 할 수 있다. 이는 윈도우즈 등 데스크탑 운영체제에서 사용되는 사용자 인터페이스(UI)와 동일한 것으로, 사용자는 데스크탑 운영체제에서 쌓은 경험을 웹에서 동일하게 경험할 수 있다. HTML5를 이용하여 구현한 소스코드는 <붙임 1>에서 제공한다.
HTML5의 다중 파일 업로드(multiple)는 현재 Firefox 3.6 이상, Safari 5 이상, Chrome 7 이상, Opera 11 이상에서 구현되며, Internet Exploer는 9 beta 버전을 포함해서 어떠한 버전에서도 구현되지 않는다.
- 기존의 웹 폼(form)이 다중 파일을 업로드 할 수 있는 기능을 지원하지 않아서, 이를 액티브X 등 플러그인 프로그램으로 구현했다. HTML5에 추가된 File API는 다중 파일을 업로드하기 위한 간단 매서드를 제공하고 있으며, 이를 이용해서 보다 쉽고 빠르게 해당 기능을 구현할 수 있다.
- 다중 파일 다운로드
- 웹에 업로드된 파일을 여러 개 다운받는 것은 기본적으로 파일을 하나씩 클릭해서 모두 다운받을 수 있다. 다만, 한 번의 클릭으로 여러 개의 파일을 동시에 다운받으려면 몇 가지를 더 고려해야 한다.
HTTP는 한 번에 하나의 파일만 전송할 수 있도록 설계되어 있다. 즉, 한 번에 여러 개의 파일을 다운받기 위해선 여러 파일을 하나의 파일로 압축해서 업로드 해야 한다. 하지만 사용자들이 파일을 압축해서 업로드 하는 과정을 클릭 한번으로 해결하려고, 개발자들은 액티브X 확장기능으로 여러 개의 파일을 선택해서 다운받는 기능을 제공하고 있다.
<그림66>체크박스로 선택해서 한꺼번에 다운받기이처럼 여러 개의 파일을 선택해서 다운받는 기능은 마치 동시에 시작하는 것처럼 보이지만, 이는 HTTP에서 실제로는 불가능하고, 각각의 파일들이 다운로드 되는데 시간 차이가 존재한다. 이처럼 시간 차이를 최소로 하여 <그림66>와 같이 한 번의 클릭으로 선택된 파일을 한꺼번에 다운로드 받는 것은 간단한 자바스크립트 코드로도 구현할 수 있다.
다운로드 버튼을 클릭하면, 체크박스가 선택된 파일을 순차적으로 최소한의 시간차이로 다운받는 방법이다.
HTML, CSS, JS 코드는 <붙임 2>와 <붙임 3>에서 확인 할 수 있으며, HTML4를 지원하는 모든 웹브라우저에서 사용할 수 있다.<!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>
<input type="submit" value="완료">
</fieldset>
</form>
</body>
</html><붙임1>다중 파일 업로드 구현 HTML5 코드 예
▶ 테스트 환경: Chrome 9 & Firefox 4 beta on Windows7<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>테스트</title>
<script src="test.js"></script>
</head>
<body>
<form id="test">
<fieldset>
<legend>다중 파일 다운로드하기</legend>
<div>
<input type="checkbox" name="file1" id="file1" value="/test.zip" />
<label for="file1">test.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="button" value="Download All" onclick="suffix=1;downloadAll(this.form);return false" />
</div>
</fieldset>
</form>
</body>
</html><붙임2>다중 파일 다운로드 구현 HTML 코드 예
▶ 테스트 환경: Chrome 9 & Firefox 4 beta on Windows7var suffix=1;
function downloadAll(oFrm){
var oChk = oFrm.elements["file"+(suffix++)];
if (oChk){
if (oChk.checked){
location.href = "http://hooney.net/files/test/" + oChk.value;
setTimeout(function(){downloadAll(oFrm)}, 1000);
}
else{
downloadAll(oFrm);
}
}
}<붙임3>다중 파일 다운로드 구현 자바스크립트 코드 예
▶ 테스트 환경: Chrome 9 & Firefox 4 beta on Windows7
- 웹에 업로드된 파일을 여러 개 다운받는 것은 기본적으로 파일을 하나씩 클릭해서 모두 다운받을 수 있다. 다만, 한 번의 클릭으로 여러 개의 파일을 동시에 다운받으려면 몇 가지를 더 고려해야 한다.