2011-04-28 2 views
54

이제 Google 크롬 11은 폴더 업로드를 지원합니다. 현재이 기능은 Google 문서 도구에서만 구현되어 있으며 코드에서이를 사용하는 방법에 대한 API 문서를 찾을 수 없었습니다.내 코드에서 Google 크롬 11의 업로드 폴더 기능은 어떻게 사용합니까?

Google 문서 도구에서 폴더 업로드 링크를 클릭하면 '폴더 찾아보기'대화 상자 (외모에 의해 SHBrowseForFolder에 대한 호출)가 표시되고 폴더를 선택한 다음 내용을 표시합니다. 해당 폴더의 파일이 Google 문서 도구에 업로드됩니다.

이 기능은 Google 크롬을 최신 버전으로 업그레이드해야하거나 Java 애플릿을 실행하는 다른 브라우저에서 내 웹 사이트에서이 기능을 사용할 수 있다고 생각합니까?

내가 유지 관리하는 콘텐츠 관리 시스템에서이 기능을 사용하고 싶습니다. http://html5-demos.appspot.com/static/html5storage/demos/upload_directory/index.html

는 기본적으로 파일의 입력 요소에 속성 "webkitdirectory"을 설정하여 작동합니다

+2

이 부분은 Chrome에서만 구현 한 HTML5 사양의 일부입니까? 아니면 크롬 전용 인물입니까? – woran

+2

@woran 크롬 전용으로 보입니다. 적어도 관련있는 항목을 찾을 수 없습니다. http://www.w3.org/TR/FileAPI/ – mikermcneil

+0

+1 Chrome 버전 : – jayarjo

답변

72

여기 데모를 볼 수 있어야합니다. 사용자가 폴더를 선택했을 때

<input type="file" id="file_input" webkitdirectory="" directory=""> 

그런 다음,이 선택에 포함 된 파일 목록을 얻기 위해 "e.target.files"개체를 통해 itterates (이것은 당신이에서 해당 파일에 액세스 할 수 있습니다 고객 입장에서).

"드래그 할 수있는"요소에서 "ondrop"이벤트를 들으면 드래그 앤 드롭이 비슷합니다. 디렉토리 나 파일 선택이 요소에 드롭되면 이벤트의 "files"속성은 조작에 포함되는 파일의리스트

+16

바울의 말이 맞습니다. Firefox에서 기능을 원한다면 비어있는'mozdirectory' 속성을 추가해야합니다. –

+0

훌륭한 답변 - 도와 주셔서 감사합니다! :-) – Peter

+4

이 기능에 대한 설명서가 있습니까? 그것을 언급하는 블로그 포스트? MDN/caniuse.com 등에서 아무 것도 찾을 수 없습니다. POST를 제출하면 모든 파일이 업로드되고 폴더는 무시됩니까? –