จะเลือกไฟล์หลายไฟล์ด้วย <input type =“ file”> ได้อย่างไร?

จะเลือกหลายไฟล์ด้วย<input type="file">?

คำตอบใหม่:

ใน HTML5 คุณสามารถเพิ่มmultipleแอตทริบิวต์เพื่อเลือกมากกว่า 1 ไฟล์

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

คำตอบเก่า:

คุณสามารถเลือกได้ 1 <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 File Upload Demo ) ทำโดยไม่ใช้แฟลชในรูปแบบที่ใช้:

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

คุณสามารถทำได้ทันทีด้วย HTML5

โดยพื้นฐานแล้วคุณใช้แอตทริบิวต์หลายรายการในการป้อนไฟล์

<input type='file' multiple>

HTML5 ได้จัดเตรียมแอตทริบิวต์ใหม่หลายรายการสำหรับองค์ประกอบอินพุตที่มีประเภทแอตทริบิวต์เป็นไฟล์ คุณจึงสามารถเลือกได้หลายไฟล์และ IE9 และเวอร์ชันก่อนหน้าไม่รองรับสิ่งนี้

หมายเหตุ: โปรดระวังชื่อขององค์ประกอบอินพุต เมื่อคุณต้องการอัปโหลดไฟล์หลายไฟล์คุณควรใช้อาร์เรย์ไม่ใช่สตริงเป็นค่าของแอตทริบิวต์ชื่อ

เช่น 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/