同じクラス名の2番目のボタンはファイル名jqueryを取得できません

Question

2つのファイルアップロードボタンがあります。ファイルをアップロードするときに、アップロードしたファイルのファイル名をテキストボックスに表示します。最初のボタンは機能しています。しかし、2番目のボタンでは、最初のボタンでアップロードされたファイルの名前を取得しています。

$("#investment_form").on("change", ".file_upload_btn", function() { 
 
    var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, ''); 
 
    var showfilename = $(this).parent().find(".file_upload_name"); 
 
    showfilename.val(filename); 
 
});

.file_upload_btn { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 95px; 
 
} 
 
.file_upload_btn input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
} 
 
.file_upload_name { 
 
    background-color: #fff; 
 
    float: left; 
 
    margin-right: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"> 
 
    <label>File 1</label> 
 
    <input id="a" class="file_upload_name" placeholder="Choose File" disabled="disabled" /> 
 
    <div class="file_upload_btn"> 
 
    <span>Upload</span> 
 
    <input id="1" type="file" class="upload" /> 
 
    </div> 
 
</div> 
 
<div class="block"> 
 
    <label>File 2</label> 
 
    <input id="b" class="file_upload_name" placeholder="Choose File" disabled="disabled" /> 
 
    <div class="file_upload_btn"> 
 
    <span>Upload</span> 
 
    <input id="2" type="file" class="upload" /> 
 
    </div> 
 
</div>

助けてください。前もって感謝します。

Answer 1

ので、それはターゲットとするかを知っている： あなたのような何かを行う必要があります。

$("#investment_form").on("change", ".file_upload_btn", function() { 
    var parent = $(this).parent(); 
    var filename = parent.find('input[type=file]').val().replace(/C:\\fakepath\\/i, ''); 
    var showfilename = parent.find(".file_upload_name"); 
    showfilename.val(filename); 
}); 

Answer 2

これは、$('input[type=file]').val()が最初のオカレンスだけ（あなたの場合は最初のファイル名）を返すためです。あなたはinput[type=file]と同じことを行う必要があり、あなたが.file_upload_nameを見つけると同じように

$(".file_upload_btn").click(function(){ 
var filename = $(this).find('input[type=file]').val().replace(/C:\\fakepath\\/i, ''); 
var showfilename = $(this).parent().find(".file_upload_name"); 
showfilename.val(filename); 
}); 

Answer 3

まず、それは代わりにDOMバブリングchangeイベントに頼るので、file入力に直接イベントをアタッチするためのより良いプラクティスです。

そこから、文字列値をハッキングする代わりに、入力のfilesコレクションを使用してアップロードしたファイル名をより確実に取得できます。

あなたの主な問題を解決するには、変更された入力と同じ.block内の.file_upload_name要素だけを見つけるためにDOMをトラバースする必要があります。これを行うにはclosest()を使用できます。これを試してみてください：

$("#investment_form").on("change", ".upload", function() { 
 
    var filename = $(this)[0].files[0].name; 
 
    $(this).closest('.block').find(".file_upload_name").val(filename); 
 
});

.file_upload_btn { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 95px; 
 
} 
 
.file_upload_btn input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
} 
 
.file_upload_name { 
 
    background-color: #fff; 
 
    float: left; 
 
    margin-right: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="investment_form"> 
 
    <div class="block"> 
 
    <label>File 1</label> 
 
    <input id="a" class="file_upload_name" placeholder="Choose File" disabled="disabled" /> 
 
    <div class="file_upload_btn"> 
 
     <span>Upload</span> 
 
     <input id="1" type="file" class="upload" /> 
 
    </div> 
 
    </div> 
 
    <div class="block"> 
 
    <label>File 2</label> 
 
    <input id="b" class="file_upload_name" placeholder="Choose File" disabled="disabled" /> 
 
    <div class="file_upload_btn"> 
 
     <span>Upload</span> 
 
     <input id="2" type="file" class="upload" /> 
 
    </div> 
 
    </div> 
 
</form>