Bagaimana cara memilih beberapa file dengan <input type = "file">?

110

Bagaimana cara memilih banyak file dengan <input type="file">?

javascript html file-upload

— Topeng
sumber

Ini tentang javascript dan html

— Mask

Apakah yang Anda maksud adalah mengunggah banyak file sekaligus (ketika Anda memilih satu per satu dan kemudian mengeklik unggah)? Atau maksud Anda menggunakan ctrl + klik untuk memilih beberapa file dalam satu jendela browser?

— cletus

2

Anda dapat melakukannya dengan HTML5 menggunakan beberapa atribut pada elemen masukan. <input type = 'file' multiple = ''> Berikut biola hebat yang memanfaatkannya: jsfiddle.net/0GiS0/Yvgc2

— Costa

126

Jawaban baru:

Di HTML5 Anda dapat menambahkan multipleatribut untuk memilih lebih dari 1 file.

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

Jawaban lama:

Anda hanya dapat memilih 1 file per <input type="file" />. Jika Anda ingin mengirim banyak file, Anda harus menggunakan beberapa tag input atau menggunakan Flash atau Silverlight.

— ZippyV
sumber

7

Gmail menggunakan Flash untuk melakukan ini

— Fabien Ménager

19

Tidak sejak HTML5. Ada beberapa atribut untuk bidang masukan.

— Costa

2

@Costa Pada 20 Oktober 2009 kebanyakan browser tidak mendukung fitur itu dan Niavlys sudah menunjukkan solusi html5 2 tahun yang lalu.

— ZippyV

2

jawaban ini lebih kuno daripada dinosaurus

— Klik Suka

2

this multiple = "multiple" tidak ramah pengguna, pengguna rata-rata tidak memahaminya, bahkan tidak tahu apa yang dilakukan "tombol ctrl", dan tidak dapat memilih file di folder yang berbeda.

— Jean-Paul

84

Ada juga HTML5 <input type="file" multiple />( spesifikasi ).

Dukungan browser cukup bagus di desktop (hanya saja tidak didukung oleh IE 9 dan sebelumnya), kurang bagus di seluler, saya rasa karena lebih sulit untuk mengimplementasikan dengan benar tergantung pada platform dan versinya.

— Niavlys
sumber

9

Tidak didukung di IE9 dan sebelumnya :(

— Ashit Vora

7

pertimbangkan untuk menambahkanname="files[]"

— Wariored

22

Semuanya akan terlihat seperti:

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

Pastikan Anda memiliki enctype='multipart/form-data'atribut di <form>tag Anda , atau Anda tidak dapat membaca file di sisi server setelah pengiriman!

— mark.inman
sumber

kecuali Anda mengirimkannya dengan websocket atau ajax

— bluejayke

14

Plugin jQuery ini ( jQuery File Upload Demo ) melakukannya tanpa flash, berupa:

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

— DigitalDaigor
sumber

juga tidak didukung di IE9-, github.com/blueimp/jQuery-File-Upload/wiki/…

— JerryDDG

8

Anda dapat melakukannya sekarang dengan HTML5

Intinya Anda menggunakan atribut multipel pada input file.

<input type='file' multiple>

— Costa
sumber

Bagaimana dengan dukungan untuk hal ini? Canisuse.com tidak memiliki infonya.

— Hubert OG

Saya tidak yakin, saya memeriksa tempat yang sama, haha.

— Costa

1

FileReader tidak memiliki .nameproperti, jadi judul dalam contoh Anda selalu undefined: jsfiddle.net/m5jeyeyt/1

— vladkras

1

HTML5 telah menyediakan beberapa atribut baru untuk elemen masukan yang atribut jenisnya adalah file. Jadi Anda dapat memilih beberapa file dan IE9 dan versi sebelumnya tidak mendukung ini.

CATATAN: hati-hati dengan nama elemen input. ketika Anda ingin mengupload banyak file, Anda harus menggunakan array dan bukan string sebagai nilai atribut name.

mis .: input type = "file" name = "myPhotos []" multiple = "multiple"

dan jika Anda menggunakan php maka Anda akan mendapatkan datanya dalam $ _FILES dan menggunakan var_dump ($ _ FILES) dan melihat output serta melakukan pemrosesan Sekarang Anda dapat mengulang dan melakukan sisanya

— Arjun J Gowda
sumber

1

Itu mudah ...

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

— Francis Thiong'o
sumber

5

Ini sudah dijawab dengan jelas. Apa perlunya menambahkan contoh javascript?

— RightHandedMonkey

karena itu bagus?

— Thomas Ludewig

0

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

— Anowar Hossain
sumber

-2

Salin dan tempel ini ke html Anda:

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

Ini datang kepada Anda, melalui saya, dari halaman web ini: http://www.html5rocks.com/en/tutorials/file/dndfiles/

— collyg
sumber