[javascript] <input type =“file”>로 여러 파일을 선택하는 방법은 무엇입니까?

로 여러 파일을 선택하는 방법은 <input type="file">무엇입니까?



답변

새로운 답변 :

HTML5에서 multiple속성을 추가하여 둘 이상의 파일을 선택할 수 있습니다 .

<input type="file" name="filefield" multiple="multiple">

이전 답변 :

당 하나의 파일 만 선택할 수 있습니다 <input type="file" />. 여러 파일을 보내려면 여러 입력 태그를 사용하거나 Flash 또는 Silverlight를 사용해야합니다.


답변

HTML5 <input type="file" multiple />( 사양 )도 있습니다.

브라우저 지원은 데스크톱에서 상당히 좋고 (IE 9 이하에서는 지원되지 않음), 모바일에서는 좋지 않습니다. 플랫폼과 버전에 따라 올바르게 구현하기가 더 어렵 기 때문이라고 생각합니다.


답변

전체 내용은 다음과 같아야합니다.

<form enctype='multipart/form-data' method='POST' action='submitFormTo.php'>
    <input type='file' name='files[]' multiple />
    <button type='submit'>Submit</button>
</form>

태그에 enctype='multipart/form-data'속성 이 있는지 확인하십시오. <form>그렇지 않으면 제출 후 서버 측에서 파일을 읽을 수 없습니다!


답변

이 jQuery 플러그인 ( jQuery 파일 업로드 데모 )은 다음을 사용하는 형식으로 플래시없이 수행합니다.

<input type='file' name='files[]' multiple />


답변

이제 HTML5로 할 수 있습니다.

본질적으로 파일 입력에 여러 속성을 사용합니다.

<input type='file' multiple>


답변

HTML5는 유형 속성이 파일 인 입력 요소에 대해 새 속성 다중을 제공했습니다. 따라서 여러 파일을 선택할 수 있으며 IE9 및 이전 버전은이를 지원하지 않습니다.

참고 : 입력 요소의 이름에주의하십시오. 여러 파일을 업로드하려면 name 속성 값으로 문자열이 아닌 배열을 사용해야합니다.

예 : input type = “file”name = “myPhotos []”multiple = “multiple”

그리고 php를 사용하는 경우 $ _FILES에 데이터를 가져오고 var_dump ($ _ FILES)를 사용하고 출력을보고 처리를 수행합니다. 이제 반복하고 나머지를 수행 할 수 있습니다.


답변

간단합니다 …

<input type='file' multiple>
$('#file').on('change',function(){
     _readFileDataUrl(this,function(err,files){
           if(err){return}
           console.log(files)//contains base64 encoded string array holding the 
           image data
     });
});
var _readFileDataUrl=function(input,callback){
    var len=input.files.length,_files=[],res=[];
    var readFile=function(filePos){
        if(!filePos){
            callback(false,res);
        }else{
            var reader=new FileReader();
            reader.onload=function(e){
                res.push(e.target.result);
                readFile(_files.shift());
            };
            reader.readAsDataURL(filePos);
        }
    };
    for(var x=0;x<len;x++){
        _files.push(input.files[x]);
    }
    readFile(_files.shift());
};