파일 선택

File select

HTML에서 파일 선택 제어는 사용자가 로컬 파일을 선택할 수 있는 웹 양식의 구성요소다.양식이 제출되면(아마도 다른 양식 데이터와 함께), 파일은 웹 서버에 업로드된다.그곳에서, 파일이 도착하면, 웹 서버에 파일을 저장하는 것과 같은 일부 작업이 보통 일어난다.그러나 발생하는 특정 작업은 양식이 제출되는 서버측 스크립트에 의해 결정된다.

코드 예제

여기 파일 선택 컨트롤이 있는 웹 양식의 코드 예가 있다.그것은 이다input로 구성하다.type="file"파일 선택 컨트롤이 생성됨. 

<형체를 이루다 액션="form-president.php" 방법="포스트" 형체를 넣다="문서/양식 데이터">  <칸막이하다>   <입력하다 id="내 파일" 이름을 붙이다="내 파일" 타자를 치다="파일">   <입력하다 가치를 매기다="업로드 ►" 타자를 치다="submit">  </칸막이하다> </형체를 이루다>

렌더링

파일 선택 제어 화면의 렌더링에 관해서는, 웹 브라우저들 사이에 약간의 변화가 있다.일반적으로 Windows 기반 플랫폼에서 사용자 에이전트는 "찾아보기" 단추와 함께 파일 선택 컨트롤을 텍스트 필드로 렌더링한다."Browse" 버튼을 누르면 파일 대화 상자가 열리며, 이 대화 상자에서 플랫폼에서 실제 파일을 선택할 수 있다.선택 후 선택한 파일의 파일 이름이 텍스트 필드에 표시된다.또는 "Browse" 버튼을 사용하는 대신 텍스트 필드에 직접 파일 이름을 입력할 수 있다.

특히 Firefox를 비롯한 일부 브라우저에서는 더 이상 파일 이름을 직접 입력할 수 없다.[1]이것은 보안 조치로서, 기밀 정보를 업로드하도록 사용자를 속일 수 있다.[2]

기능

양식 기반 파일 업로드를 위한 메커니즘은 원래 RFC 1867(1995년 11월 발행)에서 발행 후 HTML 2.0(RFC 1866)의 확장으로 제안되었다.그 후 양식 기반 파일 업로드가 HTML 3.2에 통합되었으며, 이는 양식 기반 파일 업로드에 대한 자세한 정보를 위해 RFC 1867을 명시적으로 참조한다.

HTML 4.01은 그 자체로 파일 선택 제어의 작동 방식을 설명하지는 않지만, RFC 2388과 RFC 1867을 참조로 나열한다.[3]

다중 파일 선택

RFC 1867의 의도는 하나의 파일 선택 제어로 여러 파일을 선택할 수 있어야 한다는 것이다.이러한 의도는 HTML 4.01에 반영된 것으로 보이며, HTML 4.01은 파일 선택 제어 유형에 대해 다음과[4] 같이 기술된다.

이 제어 유형은 사용자가 파일 내용을 양식과 함께 제출할 수 있도록 파일을 선택할 수 있도록 한다.INPUT 요소는 파일 선택 컨트롤을 만드는 데 사용된다.

위의 인용문 중 복수형 "파일"은 HTML 4.01에서 단일 파일 선택 제어는 하나의 파일만이 아니라 여러 파일의 선택을 여전히 처리하도록 되어 있다는 것을 나타낸다[5].

이러한 상황은 HTML5에서 파일 입력이 여러 파일을 수용해야 할 때 "복수" 속성을 추가하여 명확해지고 있다.현재 초안은 새로운 행동을 다음과 같이 지정한다.

다중 속성을 설정하지 않는 한, 선택한 파일 목록에 둘 이상의 파일이 없어야 한다.[6]

속성 수락

RFC 1867은 또한 다음과 같이 소개했다.accept의 탓으로 돌리다input원소의이렇게 하면 파일 선택 제어에 대한 MIME 유형에 기반한 파일 형식 필터링이 가능해진다.

또한, INPUT 태그에는 쉼표로 구분된 미디어 유형의 목록인 ACCESS 속성을 갖는 것이 제안된다.

ACCESS 속성이 있는 경우, 브라우저는 플랫폼에 해당하는 해당 파일 확장자와 일치하도록 요청된 파일 패턴을 제한할 수 있다.

따라서 사용자 에이전트는 다음과 같이 GIF 및 PNG 이미지 또는 모든 이미지로 제한된 파일 선택을 제한할 수 있다.

<입력하다 id="내 파일" 이름을 붙이다="내 파일" 타자를 치다="파일" 받아들이다="이미지/이미지,이미지/png"> <입력하다 id="내 파일" 이름을 붙이다="내 파일" 타자를 치다="파일" 받아들이다="image/*">

윈도우즈 플랫폼에서 이는 사용자 에이전트가 찾아보기 파일 대화 상자에 지정된 유형의 파일만 표시함을 의미할 수 있다.

브라우저 제한 사항

파일 선택 제어에 대한 기본 지원은 브라우저 벤더에 의해 신속하게 채택되었다.예를 들어, 이미 Internet Explorer 4, [7]Netscape Navigator 2.0 및 Opera 3.5에서[8]input의 요소.type="file"파일 선택 제어로 사용할 수 있다.

그러나 대부분의 최신 브라우저는 여전히 파일 선택 제어를 의도한 대로 구현하지 않거나 특정한 기능이 부족하다.[5]

여러 파일을 선택할 수 없음

현재 버전의 Chrome, Firefox, Internet Explorer, Safari 및 Opera에서는 단일 파일 선택 제어로 여러 파일의 폼 기반 업로드가 지원된다.한 소스는 오페라가 단일 파일 선택 제어를 통해 다중 파일 선택을 지원한다고 말한다[5].이는 파일 업로드 기능이 도입된 3.5부터 시작되는 오페라 버전에서도 마찬가지였다.[8]그러나 오페라 7의 첫 베타 버전과 함께 이 기능은 더 이상 사용할 수 없었다.Firefox 버전 3.6은 다중 파일 선택을 지원하여 개발자가 HTML5 File API를 통해 서버에 업로드되기 전에 파일 자체에 대한 제한된 액세스를 허용하기 시작했다.[9][10]또한 이 기능은 사용자가 Windows 탐색기와 같은 외부 응용프로그램에서 직접 웹 응용프로그램으로 파일을 드래그 앤 드롭할 수 있게 해준다.이 기능에 대한 지원의 한 눈에 띄는 예는 Gmail로 첨부파일을 이런 방식으로 추가할 수 있다.

HTML5는 입력 요소에서 다중 속성을 사용하는 다중 파일 업로드를 허용한다.[11]

자바스크립트 대체

한 가지 해결책은 JavaScript와 같은 클라이언트측 스크립팅을 사용하여 사용자가 업로드하기 위해 선택하는 각 파일에 대해 추가 파일 선택 컨트롤을 생성하는 것이다.CSS를 사용하면 이러한 추가 파일 선택 컨트롤이 표시되지 않도록 설정할 수 있다.이 기술의 예는 jQuery용 다중 파일 업로드 플러그인에 설명되어 있다.이런 방식으로 다중 파일 업로드 문제는 사용자가 업로드할 파일이 있는 만큼 파일 선택 제어 기능을 제공함으로써 해결된다.그렇다고 해서 Internet Explorer(인터넷 익스플로러)에서 업로드할 파일을 여러 개 선택하는 문제가 해결되지는 않는다.

속성 지원 수락

수락 특성은 현재 Opera 11+, Chrome 16+, Safari 6+, Firefox 9+ 및 Microsoft Internet Explorer 10+에서 지원되고 있다.

참조

  1. ^ "388784 – (CVE-2007-3511) Firefox file input focus stealing vulnerability". Bugzilla.mozilla.org. Retrieved 2013-09-02.
  2. ^ "Mozilla Firefox OnKeyDown Event File Upload Vulnerability". Juniper.net. 2010-11-15. Archived from the original on 2013-02-21. Retrieved 2013-09-02.
  3. ^ "HTML 4 Specification References". W3.org. Retrieved 2013-09-02.
  4. ^ "Forms in HTML documents". W3.org. Retrieved 2013-09-02.
  5. ^ a b c "File input (or "upload") in HTML forms". Cs.tut.fi. Retrieved 2013-09-02.
  6. ^ "HTML 5.1 specification". W3C.
  7. ^ "input type=file Object". Msdn2.microsoft.com. 2013-07-22. Retrieved 2013-09-02.
  8. ^ a b "Browser History: Opera". Blooberry.com. Retrieved 2013-09-02.
  9. ^ on December 10, 2009 by Paul Rouget (2009-12-10). "multiple file input in Firefox 3.6 ✩ Mozilla Hacks – the Web developer blog". Hacks.mozilla.org. Retrieved 2013-09-02.
  10. ^ "Using files from web applications - MDC". Developer.mozilla.org. 2013-08-23. Retrieved 2013-09-02.
  11. ^ HTML 5.1 규격: 4.10.5.3 공통 입력 요소 속성

외부 링크