Показать несколько файла изображения и уменьшенное изображение

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); 
    }); 

так, просто дублировать код на другой идентификатор входа файла.

или сделать это следующим образом:

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