¿Eliminar programáticamente 1 o más archivos de la carga en html5?

Question

Tengo lo siguiente. En dostuff me gustaría eliminar 1 o más archivos (pero no todos) de mis archivos cargados.

Las únicas imágenes que acepto son png, jpg y gif. Bmp, svg y etc. obtendrán el formulario rechazado.

Hago un jaque en Javascript pero me gustaría preguntar si puedo eliminar los archivos no aceptados (bmp, etc.) y continuar. ¿Cómo puedo eliminar los archivos de la carga programáticamente?

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

Answer 1

Puede acceder a los archivos como una matriz, luego simplemente manipule la matriz según sea necesario para eliminar los archivos no aceptados.

<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

Me he encontrado recientemente con este problema también. Estoy usando jQuery para resolver mi problema, lo que significa que podría traducirse a vanilla js si quisieras hacer eso. Aquí hay un fragmento de código:

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

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

Espero que ayude!