Javascript複数の属性を持たないファイル入力要素と異なるIDを持つファイルの数を取得しますか？

Question

IDが異なる複数の入力ファイルがあります。私はファイルの数を数え、ファイルの名前を取得したいと思います。

<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>

Answer 1

：

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 

はここにフィドルを参照してください。 、jsfiddle

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

https://jsfiddle.net/smv3b53w/

Answer 2

私が正しくあなたの要求を理解している場合は、各ファイルをカウントし、変数をインクリメントするためにここにjQueryの少しを使用することができます。あなたが必要なセレクタを渡すことによって、querySelectorAllのAPIを使用して試すことができます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>