具有相同類名的第二個按鈕無法獲取文件名jquery

Question

我有兩個文件上傳按鈕。當我上傳文件時，我想在文本框中顯示上傳文件的文件名。對於第一個按鈕，它正在工作。但是對於第二個按鈕，它將採用第一個按鈕上傳的文件的名稱。

$("#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

就像你找到.file_upload_name，你需要做同樣與input[type=file]，所以它知道要定位的一個。

$("#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()將僅返回第一次出現（在您的情況下，第一個文件名）。 你應該這樣做：

$(".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

首先，它是更好的做法，對事件直接連接到file輸入，而不是依靠change事件通過DOM冒泡。

從那裏，您可以更可靠地獲取通過使用輸入的files集合上傳的文件名，而不是繞過它的字符串值。

要解決您的主要問題，您需要遍歷DOM以便在與更改的輸入相同的.block內僅查找.file_upload_name元素。要做到這一點，你可以使用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>