Show multiple image filename and image thumbnail

Question

As of now my code looks like this:

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

This will only display the name of the first image selected.

And this is my 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">

Hiding all the input file in css.

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

Here is the live code. https://jsfiddle.net/xkevin/2qp98thx/

Questions:

What I would like to do is:

-In Jquery, What is the best/clean way to show the filename of the selected image?

In my mind it is like this:

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

so, just duplicating the code to other id of the file input.

or do it like this:

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

but don't know what would be the next..

-Also how can I show the thumbnail of the image selected when the file name displays?

I have ten(10) input files here so it is a bit messy when I just duplicate the whole code of my existing jQuery code. Any help and guide is much appreciated! Thanks

Rather than grabbing the `value` of the file input, step through the `files` array that it has - this will contain each of the selected files. — enhzflep, Nov 07 '16 at 07:10
the thumbnail issue would require more work, since you haven't uploaded the img yet. Therefore, you would have to upload it via AJAX first, and then you could display its thumbnail. Otherwise it is just a file about to be uploaded, but not yet. — arhak, Nov 07 '16 at 11:12

score 2 · Answer 1 · answered Nov 07 '16 at 09:03

2

Loop through them all by class:

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

answered Nov 07 '16 at 09:03

OK sure

2,617
16
29

score 1 · Accepted Answer · answered Nov 07 '16 at 11:10

you could use .parent().find('span') as @Bat said or you could use .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">

I think no. Although you could create an illusion. (Not sure if some trick would be possible using `file:///`) — arhak, Nov 08 '16 at 06:39
regarding a `file:///` workaround, it won't be possible either due to this http://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath#4851614 — arhak, Nov 08 '16 at 08:34

Show multiple image filename and image thumbnail

2 Answers2