Tengo múltiples archivos de entrada que tienen diferentes ID. Me gustaría contar la cantidad de archivos y obtener los nombres de los archivos.

<div class="fieldContainer"><input type="file" class="txtField"  name="fileAttach[]" id="filename1"></div>
<div class="fieldContainer"><input type="file" class="txtField"  name="fileAttach[]" id="filename2" ></div>
<div class="fieldContainer"><input type="file" class="txtField"  name="fileAttach[]" id="filename3" ></div>
-1
Raj 13 may. 2016 a las 17:15

3 respuestas

La mejor respuesta

Puede intentar usar querySelectorAll API pasando los selectores requeridos. Por favor encuentre el jsfiddle

var count = document.querySelectorAll(".fieldContainer > input[type='file']")
alert(count.length);

https://jsfiddle.net/smv3b53w/

2
Bkjain655 13 may. 2016 a las 15:08

Si he entendido su solicitud correctamente, puede usar un poco de jQuery aquí para contar cada archivo e incrementar una variable.

var i = 0; //variable to count each file - starting at 0
$('input[type="file"]').each(function(){
    alert($(this).attr('id')); //alerts for each file found
  i++; // adds 1 to the variable "i"
});
alert("there are "+i+" files."); // alerts the final count of variable "i" - giving you the total number of files

Vea el violín aquí: https://jsfiddle.net/mgtyxusm/1/

0
Frits 13 may. 2016 a las 14:38

Cuando input seleccione el archivo, agregue el nombre del archivo a un objeto y luego escriba el contenido del objeto en html.

var files = {};
$("input").on("change", function(e){ 
   var count = 0; 
   var id = $(this).prop("id");
   files[id] = $(this)[0].files[0].name;
 
   $("ol").html("");
   $.each(files, function(key, value){
       $("ol").append("<li>"+ value +"</li>");
       count++;
   });
   $("#count").text(count + " Items selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="file" id="filename1" />
<div>
    <input type="file" id="filename2" />
</div>
<div>
    <input type="file" id="filename3" />
</div>
<div id="count"></div>
<ol></ol>
0
Mohammad 13 may. 2016 a las 15:17