1 veya daha fazla dosyayı html5 dosyasından karşıya yüklemek üzere programlı olarak kaldırın.

Question

Aşağıda var. dostuff'da 1 veya daha fazla dosyayı (hepsi değil) dosya yüklemelerimden kaldırmak istiyorum.

Kabul ettiğim tek görüntüler png, jpg ve gif. Bmp, svg ve benzeri form reddedilecektir.

Javascript'te bir kontrol yapıyorum ancak kabul edilmeyen dosyaları (bmp, vb.) Kaldırabilir miyim diye sormak istiyorum. Dosyaların program aracılığıyla yüklenmesini nasıl kaldırabilirim?

<input type='file' name='uploads[]' multiple="" 
     onchange="dostuff(this);" accept="image/*" /> 

Answer 1

Dosyalara bir dizi olarak erişebilir, ardından diziyi kabul edilmeyen dosyaları kaldırmak için gereken şekilde değiştirebilirsiniz.

<script type="text/javascript"> 
    function dostuff(input) { 
     var output = 'All Files:<br />'; 
     var validOutput = '<br />Valid Files:<br />'; 
     var validFiles = []; 
     for(var i = 0; i < input.files.length; i++) { 
      if(input.files[i].name.substr(-3, 3) != 'jpg') { 
       alert(input.files[i].name + ' is invalid'); 
      } 
      else { 
       validFiles.push(input.files[i]); 
       validOutput += input.files[i].name; 
      } 
      output += input.files[i].name + '<br />'; 
     } 
     output += validOutput; 
     document.getElementById('output').innerHTML = output; 
    } 
</script> 

<input type='file' name='uploads[]' multiple="" onchange="dostuff(this);" accept="image/*" /> 
<div id="output"></div> 

Fiddle here.

Answer 2

Son zamanlarda bu soruna da girdim. Sorunumu çözmek için jQuery kullanıyorum, yani bunu yapmak istiyorsanız vanilya js'ye çevrilebilir. İşte bir kod pasajı:

function clearFileInput(){ 
    var fileInput = $('#your-file-input-selector'); 
    var fileInputContainer = fileInput.parent(); 
    var fileInputClone = fileInput.clone(); 

    fileInput.remove(); 
    fileInputContainer.append(fileInputClone); 
} 

Bu yardımcı olur umarız!