<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());
};

<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
<?php
print_r($_FILES['img']['name']);
?>

이것을 복사하여 html에 붙여 넣으십시오.

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
  output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

이것은 나를 통해 다음 웹 페이지에서 제공됩니다. http://www.html5rocks.com/en/tutorials/file/dndfiles/