Làm cách nào để chọn nhiều tệp với <input type = “file”>?

Làm thế nào để chọn nhiều tệp với <input type="file">?

Câu trả lời mới:

Trong HTML5, bạn có thể thêm multiplethuộc tính để chọn nhiều hơn 1 tệp.

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

Câu trả lời cũ:

Bạn chỉ có thể chọn 1 tệp cho mỗi <input type="file" />. Nếu bạn muốn gửi nhiều tệp, bạn sẽ phải sử dụng nhiều thẻ nhập hoặc sử dụng Flash hoặc Silverlight.

Ngoài ra còn có HTML5 <input type="file" multiple />( đặc tả ).

Hỗ trợ trình duyệt khá tốt trên máy tính để bàn (chỉ là không được hỗ trợ bởi IE 9 trở về trước), ít tốt hơn trên thiết bị di động, tôi đoán vì khó triển khai chính xác hơn tùy thuộc vào nền tảng và phiên bản.

Toàn bộ mọi thứ sẽ giống như sau:

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

Đảm bảo rằng bạn có enctype='multipart/form-data'thuộc tính trong <form>thẻ của mình , nếu không bạn không thể đọc các tệp ở phía máy chủ sau khi gửi!

Plugin jQuery này ( jQuery File Upload Demo ) thực hiện nó mà không cần flash, ở dạng nó đang sử dụng:

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

Bạn có thể làm điều đó ngay bây giờ với HTML5

Về bản chất, bạn sử dụng nhiều thuộc tính trên đầu vào tệp.

<input type='file' multiple>

HTML5 đã cung cấp nhiều thuộc tính mới cho phần tử đầu vào có thuộc tính kiểu là tệp. Vì vậy, bạn có thể chọn nhiều tệp và IE9 và các phiên bản trước không hỗ trợ điều này.

LƯU Ý: cẩn thận với tên của phần tử đầu vào. khi bạn muốn tải lên nhiều tệp, bạn nên sử dụng mảng chứ không phải chuỗi làm giá trị của thuộc tính name.

ví dụ: input type = "file" name = "myPhotos []" multiple = "nhiều"

và nếu bạn đang sử dụng php thì bạn sẽ lấy dữ liệu trong $ _FILES và sử dụng var_dump ($ _ FILES) và xem đầu ra và thực hiện xử lý Bây giờ bạn có thể lặp lại và thực hiện phần còn lại

Thật dễ dàng ...

<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']);
?>

Sao chép và dán nó vào html của bạn:

<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>';
}

Điều này đến với bạn, thông qua tôi, từ trang web này: http://www.html5rocks.com/en/tutorials/file/dndfiles/