Skip to content
TUWLAB.com
모든 게시물에 대하여 '링크'
방식의 퍼가기만 허용합니다.
한양대학교 전자통신컴퓨터공학부
바라미
  • 578
  • 2573950
DNS Powered by DNSEver.com
일반

File Object (<input type='file' />)에 대하여

Posted 2013. 03. 26 Updated 2017. 06. 02 Views 51401 Replies 2
Atachment
첨부
<input type="file" />

이라고 쓰면 다음과 같이 파일을 업로드 할 수 있는 입력 필드가 만들어집니다.

input_file.png
▲ 파일 입력 필드

본인과 이 파일 업로드 필드와의 악연은 오래전까지 거슬러 올라갑니다.

같은 input인데도 특이하게 이녀석은 text 필드와 button 필드가 함께 붙어서 생성됩니다. 텍스트와 버튼이 붙어있어서 스타일을 씌우기도 애매하고, 하물며 저 [찾아보기…] 라고 쓰여 있는 버튼의 값을 바꿀수조차 없었습니다.

<FORM>을 생성할 때 enctype="multipart/form-data"로 지정하고 그 안에 파일 입력 필드를 생성합니다. 그리고 사용자가 파일을 지정하고 폼을 전송하면 저기에 입력된 파일이 고스란히 서버로 전송됩니다.


브라우저에서 유일하게 로컬 파일 시스템과 직접 상호작용 할 수 있는 입력 필드지만, 그만큼 자바스크립트 등을 통한 접근도는 다른 입력 필드에 비해 상당히 제한되어 있습니다.

예를 들어, 다른 입력 필드들과는 달리 자바스크립트를 통해 이 필드의 값을 임으로 지정하는 것이 불가능합니다. 다음과 같은 코드로 값을 지정할 수 있을 것처럼 보이지만, 실제 해 보면 동작하지 않는다는 것을 알 수 있다.

...
<script>
...
	document.getElementById('myFile').value = "C:\...";
...
</script>
...
<input id="myFile" type="file" />
...

값을 쓰는 것은 물론, 지정된 값을 '그대로' 읽어오는 것 또한 불가능합니다. 일반적인 필드에 입력된 값을 읽듯이 alert([FileObject].value);를 쳐 보면 입력된 전체 값이 아닌 파일명만 표시됨을 알 수 있습니다.

alert_file.png
▲ 읽을 수 있는 값도 경로를 포함한 전체 값이 아닌 파일명에 한정됩니다.

왜 유독 파일 입력 필드만 이런 이상 동작(?)을 하는지 그 이유는 잠시 마우스를 내려놓고 명상에 잠겨 보면 알 수 있습니다. 파일 입력 필드는 지정된 경로의 파일을 고스란히 서버로 전송할 수 있는 능력을 갖고 있기 때문입니다.

악의적으로 만들어진 웹사이트에 접속했는데, 그곳에서 자바스크립트를 통해 임의의 로컬 파일의 경로를 지정하고 그대로 폼을 자동으로 전송시켜 버린다고 생각해 봅시다. 사용자는 자신도 모르는 사이 쥐도새도 모르게 로컬에 저장되어 있는 파일이 나도 모르는 서버로 전송되어 버리는 것입니다.

만약 파일업로드 필드에 이런 제약이 가해져 있지 않았다면, 공인인증서가 저장된 USB를 컴퓨터에 연결한 상태에서는 마음놓고 웹서핑도 하지 못할 것입니다.

이런 어쩔 수 없는 불편함 때문에 그간 웹 개발을 하더라도 파일 입력 필드는 가급적 사용하지 않거나, 최소한도로 사용해 왔습니다. 하지만 이번에 프로젝트를 진행하면서 어쩔 수 없이 파일 입력 필드와 한 판 대결을 하게 되었습니다.

지금 이 글을 쓰는 화면에도 보이고 있지만, XE의 에디터 아래에 달려 있는 파일 업로드 컴포넌트는 위와 같은 제약조건에서 비교적 자유로운 것처럼 보입니다.

swfuploader.png
▲ XE의 파일업로드 컴포넌트

처음에는 '편하게 잘 만들어놨구나. 어딘가에 파일 입력필드를 숨겨놨겠지.' 라고 생각했는데, 이번 프로젝트에서 이걸 뜯어보고 경악하지 않을 수가 없었습니다. 플래시라니.. 플래시라니...

XE의 파일 업로드 컴포넌트는 SWFUploader라는 플래시 기반 파일 업로더로 구현된 것이었습니다. 왠지 파일 선택 창이 뭔가 범상치 않더니.. 역시 그런거였던 것입니다.

이게 정말인지 믿기지 않는다면, XE 파일 업로더 컴포넌트의 [파일 첨부] 링크 위에 마우스를 올리고 오른쪽 버튼을 살포시 눌러 보도록 하자. 익숙한 플래시 동영상의 컨텍스트 메뉴가 나타날 것입니다.


파일 입력 필드

파일 입력 필드는 앞서 설명했듯이, 로컬에 저장되어 있는 파일을 지정하는 입력 필드입니다.

아직 널리 알려져 있지 않은 것으로 보이지만, HTML 마크업으로 복수의 파일을 지정하거나(multiple), 특정 MIME Type의 파일만 입력받거나(accept) 하는 등의 커스터마이징이 가능합니다.

<input type="file" multiple />
<input type="file" accept="image/jpeg,video/*[, MIME_TYPES]" />

file_input_customise.png
▲ multiple 속성과 accept="image/*" 속성을 동시에 지정한 파일 선택창

물론, 이것은 어디까지나 클라이언트단에서의 필터링이므로 서버단에서 다시 한 번 검사 해서 금지된 형식의 파일은 차단하는 등의 조치를 취해 줘야 합니다.


FileList 객체

파일 입력 필드는 외형상으로는 일반 폼 필드의 형태를 취하지만, 사용자의 입력에 따라 내부적으로 FileList 객체를 생성합니다. 이 객체에는 자바스크립트로 접근해서 파일명, 파일형식, 파일크기 등의 정보를 읽을 수 있습니다.

var fileObject = document.getElementById("myFileObject");
...
var fileName = fileObject.files[i].name;	// 파일명
var fileSize = fileObject.files[i].size;	// 파일 크기(byte)
var fileType = fileObject.files[i].type;	// 파일 MIME Type
...

파일 입력 필드를 생성하는 경우 뿐만 아니라, 브라우저의 화면 영역으로 파일을 드래그 하는 경우에도 FileList 객체가 생성됩니다.  Drop 이벤트를 받아서 FileList를 얻을 수 있으며, 이를 이용해서 Drag & Drop 파일 업로더를 구현할 수 있습니다.

daum_uploader.png
▲ Drag & Drop 파일 업로더 (다음 메일)


서비스 선택
이용중인 SNS 버튼을 클릭하여 로그인 해주세요.
SNS 계정을 통해 로그인하면 회원가입 없이 댓글을 남길 수 있습니다.
댓글
?
Powered by SocialXE

  • June S. LeeJune S. Lee 2016.07.17 13:55:21
    안녕하세요 우연히 발견한 사이트인데 좋은 정보들 감사합니다. 한가지 여쭤보고 싶은 것이 있습니다. 다름 아니라, 위의 캡춰된 화면 이미지들 중에서, "검정 바탕 화면에 컬러로 영문/한글 코드가 적힌" 화면들에서 사용하시는 폰트가 무엇인지 여쭤봐도 될런지요. 너무 이쁘고 가독성이 좋아 저도 사용하고 싶은데, 폰트 이름을 잘 모르겠네요. 저는 MS윈도우 사용자입니다. 감사합니다.

List of Articles
번호 분류 제목 글쓴이 최근 수정일 조회 수
193 Linux [Bash] 자동완성 스크립트(Completion Script) 작성 방법과 동작 원리 TUW 2019.08.28 7500
192 OrCAD [OrCAD Capture] 회로도 PDF로 출력하기 - PDF Export 활용 file TUW 2021.12.28 17694
191 일반 [WSL] Windows Subsystem for Linux - 디스플레이 서버 설정 및 GUI 사용하기 file TUW 2021.12.28 32766
190 일반 [TeraTerm] 명령줄 인수와 공개키 인증으로 간편하게 SSH 접속하기 TUW 2018.11.06 4455
189 일반 [WSL] Windows Subsystem for Linux - SSH 서버 자동 시작 설정하기 file TUW 2021.12.28 17409
188 일반 [WSL] Windows Subsystem for Linux - SSH 서버 세팅하기 file TUW 2021.12.28 43072
187 일반 [WSL] Windows Subsystem for Linux - Bash.exe를 Ubuntu와 유사하게 설정하기 file TUW 2021.12.28 5818
186 일반 [WSL] Windows Subsystem for Linux - 초기 설치와 Ubuntu 배포판 설치 file TUW 2021.12.28 16370
185 일반 [AutoHotkey] 단축키(Hotkey) 스크립트 작성과 자동 시작 등록 file TUW 2021.12.28 23161
184 일반 [AutoHotkey] 소개와 설치 및 기본 설정 - GUI 예시, 기본 에디터 변경 file TUW 2021.12.28 10741
183 일반 Windows에서 포트 포워딩(Port Forwarding) 설정하기 - Netsh TUW 2018.02.03 61623
182 Security [SSL/HTTPS] Let's Encrypt 무료 SSL 인증서 발급/설치/관리 - certbot 사용법 file TUW 2021.12.28 33540
181 Security [SSL/HTTPS] StartSSL/StartCom 사태와 Let's Encrypt로의 이전 1 file TUW 2021.12.28 11976
180 Linux [Ubuntu] Windows와 멀티부팅 환경에서 시간이 맞지 않는 현상 해결하기 TUW 2017.06.08 29492
179 일반 [Windows] 다중 NIC(LAN카드) 환경에서 Routing Table 설정 - route 명령 2 file TUW 2019.10.21 72773
178 일반 [CMake 튜토리얼] 3. CMakeLists.txt 기본 패턴 5 TUW 2019.08.19 48900
목록
Board Pagination Prev 1 2 3 4 5 6 7 ... 13 Next
/ 13

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5