顯示多個圖像文件名和圖像縮略圖

Question

截至目前我的代碼看起來是這樣的：

$(document).ready(function(){ 
    $("#p-image-1").on("change", function() { 
     var fileName = ""; 
     fileName = $(this).val(); 
     $("#file-image-1").html(fileName); 
    }); 
}); 

這將只顯示所選擇的第一個圖像的名稱。

這是我的html。

<!---Upload 1-----> 
        <label for="p-image-1" class="custom-file-upload"> Upload image </label> 
        <span id="file-image-1"></span> 
        <input type="file" id="p-image-1" class="product-file-upload" name="p-image-1" accept="image/jpeg"> 

        <!---Upload 2-----> 
        <label for="p-image-2" class="custom-file-upload"> Upload image </label> 
        <span id="file-image-2"></span> 
        <input type="file" id="p-image-2" class="product-file-upload" name="p-image-2" accept="image/jpeg"> 

        <!---Upload 3-----> 
        <label for="p-image-3" class="custom-file-upload"> Upload image </label> 
        <span id="file-image-3"></span> 
        <input type="file" id="p-image-3" class="product-file-upload" name="p-image-3" accept="image/jpeg"> 

隱藏所有輸入文件在CSS中。

.product-file-upload{ 
    display:none; 
} 

這裏是實時代碼。 https://jsfiddle.net/xkevin/2qp98thx/

問題：

我想要做的是：

- 在jQuery的，什麼是最好的/清潔的方式來顯示所選擇的圖像的文件名？

在我看來它是這樣的：

$("#p-image-1").on("change", function() { 
     var fileName = ""; 
     fileName = $(this).val(); 
     $("#file-image-1").html(fileName); 
    }); 
$("#p-image-2").on("change", function() { 
     var fileName = ""; 
     fileName = $(this).val(); 
     $("#file-image-2").html(fileName); 
    }); 

，只需複製代碼到文件輸入的其它ID。

或做這樣的：

$("#p-image-1,#p-image-2,#p-image-3").on("change", function() { 

，但不知道是什麼將是下一個..

- 也我怎麼能顯示圖像的選擇縮略圖當文件名稱顯示？

我在這裏有十（10）個輸入文件，所以當我只複製我現有的jQuery代碼的整個代碼時，有點麻煩。任何幫助和指導非常感謝！由於

Answer 1

你可以使用.parent().find('span')作爲@Bat說 或者你可以使用.prev()

$(document).ready(function(){ 
 
    $(".product-file-upload").on("change", function() { 
 
     $(this).prev().html($(this).val()); 
 
    }); 
 
});

.product-file-upload{ 
 
    display:none; 
 
} 
 
.custom-file-upload { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!---Upload 1-----> 
 
<label for="p-image-1" class="custom-file-upload"> Upload image </label> 
 
<span id="file-image-1"></span> 
 
<input type="file" id="p-image-1" class="product-file-upload" name="p-image-1" accept="image/jpeg"> 
 
<br/> 
 
<br/> 
 
<!---Upload 2-----> 
 
<label for="p-image-2" class="custom-file-upload"> Upload image </label> 
 
<span id="file-image-2"></span> 
 
<input type="file" id="p-image-2" class="product-file-upload" name="p-image-2" accept="image/jpeg"> 
 
<br/> 
 
<br/> 
 
<!---Upload 3-----> 
 
<label for="p-image-3" class="custom-file-upload"> Upload image </label> 
 
<span id="file-image-3"></span> 
 
<input type="file" id="p-image-3" class="product-file-upload" name="p-image-3" accept="image/jpeg">

Answer 2

遍歷所有這些通過類：

$(".product-file-upload").each(function() { 
    $(this).on("change", function() { 
     $(this).parent().find('span').html($(this).val()); 
    }); 
});