Question

我有多个具有不同ID的输入文件。我想计算文件的数量并获取文件的名称。

'Femail'

Answer 1

您可以通过传递所需的选择器来尝试使用querySelectorAll API。请找到jsfiddle

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

https://jsfiddle.net/smv3b53w/

Answer 2

如果我已正确理解您的请求，您可以在此处使用一点jQuery来计算每个文件并增加变量。

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

请点击此处：https://jsfiddle.net/mgtyxusm/1/

Answer 3

当input选择文件时，将文件名添加到对象中，然后在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>

Javascript从没有多个属性的文件输入元素获取具有不同id的文件数？

3 个答案: