2011-08-11 2 views
42

가능한 중복 선택 여러 개의 파일이있는 경우 : 여러 개의 파일을 선택
Retrieving file names out of a multi-file upload control with javascript입력 유형 = "파일을"GET 값이

HTML5 입력 유형에서

= "파일을"허용 사용자를 multiple = "multiple"을 추가하십시오.

제 질문은 : 어떻게 그 입력 값을 얻을 수 있습니까? .value를 사용할 때 첫 번째 파일의 파일 이름 만 반환하지만 두 개 이상을 선택하면 다른 파일을 볼 수 없습니다.

내가 무엇을 가지고 : 당신이 말한대로

<input type="file" multiple="multiple" onchange="alert(this.value)" 
    onmouseout="alert(this.value) /> 

는 만 선택한 파일 중 하나의 이름을 보이고있다.

참고 : 나는 값을 편집하지 않으 는 파일의 이름 만

감사합니다 (I는 불가능 알고있다)! 선택

답변

77

파일은 배열에 저장됩니다 [input].files

예를 들어, 항목

jQuery를 편안한 사람들의
// assuming there is a file input with the ID `my-input`... 
var files = document.getElementById("my-input").files; 

for (var i = 0; i < files.length; i++) 
{ 
alert(files[i].name); 
} 

에 액세스 할 수 있습니다, 그것은 마찬가지로 쉽게

// assuming there is a file input with the ID `my-input`... 
var files = $("#my-input")[0].files; 

for (var i = 0; i < files.length; i++) 
{ 
alert(files[i].name); 
} 
+2

파일 입력 파일 속성이 예에서 정의되지 다른 브라우저에서 잘 작동하지만 : 그것은 File objects의 모음의 각 파일은 name 속성이 있습니다. 이 일을 둘러 볼 방법이 있니? –

+3

IE9에서는'files [i]'가 정의되지 않았습니다. IE9에서이 작업을 수행하는 방법에 대한 해결책을 줄 수 있습니까? – OO7

+2

@ OO7 IE9는 다중 입력 파일을 지원하지 않습니다. IE10 + 전용입니다. – barell

8

당신을 use input.files property. ,

onmouseout="for (var i = 0; i < this.files.length; i++) alert(this.files[i].name);" 
+0

고마워, 완벽하게 freedompeace 대답 (name 또는 fileName 모두 작동)과 동일하게 작동하지만 그는 먼저 대답하고 어쨌든 +1 대답을 +1로 설정할 수 없다. – spuas

+0

실제로 그는 적절한 코드 예제없이 먼저 대답하고 편집했다. 그의 게시물은 내가 보낸 후. 그러나 -별로 중요하지 않습니다. :) –