2009-10-20 18 views
42

<input type="file"> ile birden çok dosya nasıl seçilir?<input type = "file"> ile birden çok dosya nasıl seçilir?

+0

O var javascript ve html – Mask

+0

hakkında size (bir seferde bir tane seçip yüklemeyi tıkladığında) tek seferde birden fazla dosya yükleyebilir ifade ediyor mu? Yoksa bir tarayıcı penceresinde birden fazla dosya seçmek için ctrl + tıklama mı kastediyorsunuz? – cletus

+2

Girdi öğesindeki çoklu özniteliği kullanarak HTML5 ile yapabilirsiniz. İşte kullanan büyük bir keman var: http://jsfiddle.net/0GiS0/Yvgc2/ – Costa

cevap

38

Yeni cevap:

HTML5'de fazla 1 dosyayı seçmek için multiple özelliğini ekleyebilirsiniz.

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

Eski cevap:

yalnızca <input type="file" /> başına 1 dosya seçebilir. Birden fazla dosya göndermek için 'a birden çok giriş etiketi kullanmanız veya Flash veya Silverlight kullanmanız gerekir.

+6

Gmail Flaş bu –

+0

çalışan bir demo sağlayabilir yapmak için kullandığı? – Mask

+0

http://www.uploadify.com/demo/ – ZippyV

60

Ayrıca, HTML5 <input type="file" multiple /> da vardır, ancak ne kadar yaygın olduğunu bilmiyorum.

+8

IE9 desteklenir ve Not döner şekilde önce :( –

11

Bu jQuery eklentisi (jQuery File Upload Demo) şeklinde o kullanıyor, flaşsız yapar:

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

da IE9- desteklenmez, HTTPS:/İşte /github.com/blueimp/jQuery-File-Upload/wiki/Browser-support#multiple-file-selection – JerryDDG

14

her şey gibi görünmelidir:

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

Eğer enctype='multipart/form-data' özelliği de olduğundan emin olun senin <form> etiketine, ya da sunulduktan sonra sunucu tarafında dosyaları okuyamazsın!

7

Sen dosya girişinde birden özelliğini kullanmak Özünde HTML5

ile şimdi yapabilirsiniz.

<input type='file' multiple> 
+0

kullandığı büyük keman: http://jsfiddle.net/0GiS0/Yvgc2 – Costa

+0

bunun desteği hakkında şey? Canisuse.com bilgi bulunmamaktadır. –

+0

Ben haha, aynı yerde emin değildi kontrol ediyorum. – Costa

1

HTML5, type özelliği dosya olan giriş öğesi için çoklu öznitelik sağladı. Böylece birden çok dosya seçebilir ve IE9 ve önceki sürümler bunu desteklemez.

NOT: Giriş elemanının adıyla dikkatli olun. Birden çok dosya yüklemek istediğinizde dizi kullanmalısınız ve ad özniteliğinin değeri olarak dize kullanmalısınız.

örn: input type = "file" name = "myPhotos []" çoklu = "birden fazla"

ve o zaman $ _FILES veri ve kullanım var_dump ($ alacak php kullanarak _ eğer DOSYALARI) ve çıkışını görmek ve Şimdi adımlayabilirsiniz işleme yapmak ve dinlenme

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

Kopyala yapmak ve html yapıştırabilirsiniz:

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

Bu bana göre, bu web sayfasından geliyor: http://www.html5rocks.com/en/tutorials/file/dndfiles/

-1

Bu kolay ...

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

http://jsfiddle.net/m5jeyeyt/1/ ne javascript eklemek için ihtiyaçtır örnek? – RightHandedMonkey

İlgili konular