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/

问题：

我想做的是：

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

按类循环遍历它们：

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

Answer 2

你可以使用.parent().find('span')作为@Bat说或者您可以使用.prev()

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

显示多个图像文件名和图像缩略图

2 个答案: