Mulitple file inputs display issues with css and javascript

Question

Hi have multiple input to upload 5 pictures, but the issue is that the css is not displaying properly (it only affect the first one for the text block) and the javascript is not reacting to the correct input.

So I have this html structure for the 5 input:

<div class="form-group col-md-12" id="imagesSup">
    <label for="imagesSup" class="col-md-12">Images supplémentaires: </label>
    <div class="image">
        <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup0">
        <p><span>Chargez une image</span></p>
        <input type="file" name="imagesSup[]" id="imageSup0" class="inputImagesSup" style="display: none">
    </div>
    <div class="image">
        <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup1">
        <p><span>Chargez une image</span></p>
        <input type="file" name="imagesSup[]" id="imageSup1" class="inputImagesSup" style="display: none">
    </div>
    <div class="image">
        <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup2">
        <p><span>Chargez une image</span></p>
        <input type="file" name="imagesSup[]" id="imageSup2" class="inputImagesSup" style="display: none">
    </div>
    <div class="image">
        <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup3">
        <p><span>Chargez une image</span></p>
        <input type="file" name="imagesSup[]" id="imageSup3" class="inputImagesSup" style="display: none">
    </div>
    <div class="image">
        <img src='' class="conteneurImagesSup col-md-2" id="conteneurImagesSup4">
        <p><span>Chargez une image</span></p>
        <input type="file" name="imagesSup[]" id="imageSup4" class="inputImagesSup" style="display: none">
    </div>
</div>

The css:

.conteneurImagesSup{
    height: 160px;
    border: dashed darkgrey medium;
    border-radius: 5px;
    margin-right: 25px;
    text-decoration: none;
    text-align: center;
    padding: 0;
}

.image {
    position: relative;
    cursor:pointer;
}
.image p {
    position: absolute;
    top: 60px;
    left: 0;
}
.image p span {
    color: white;
    font: bold medium Helvetica, Sans-Serif;
    letter-spacing: -1px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

Which give us this result, where we can see the 4 text block missing:

And finally the javascript, when I add a picture I want it to be displayed in the corresponding field but, whatever the way I use to affect the img corresponding it only affects the last one:

for(var i=0; i<4; i++)
{
    $("#conteneurImagesSup"+i).on('click', function(e){
        e.preventDefault();
        $("#imageSup"+i).trigger('click');
    });
}

$(".inputImagesSup").change(function(event) {
    $(this).siblings("img").attr('src',URL.createObjectURL(event.target.files[0]));
});

Which gives us:

Deblaton Jean-Philippe · Accepted Answer · 2016-07-25 11:33:49Z

1

I can only explain you the thing about the image always displayed in the last square.

you have a for loop :

for(var i=0; i<4; i++)
{
    // smthg not relevent now
}

which is the same than :

var i = 0;
for (; i<4; i++){   // I want to explain you that i is declared out of the scope of the for loop.

}

So, when the following is run :

$("#conteneurImagesSup"+i).on('click', function(e){
     //not relevant now
});

i has the value you want him to have.

But, when the "sub" function is called ($("#imageSup"+i).trigger('click');), i, that was declared out of the for scope, has currently the last value it had (4).

So, if you want to make it work correctly, you need to declare a new variable inside the scope of the for :

for(var i=0; i<4; i++)
{
    var index = i;
    $("#conteneurImagesSup"+i).on('click', function(e){
        e.preventDefault();
        $("#imageSup"+index).trigger('click');
    });
}

answered Jul 25, 2016 at 11:33

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Remi Hirtz Over a year ago

I see what you are saying and it's definetly the issue but your solution unfortunatly is not working, I still have the same issue :(

Bart · Accepted Answer · 2016-07-25 11:38:51Z

1

I'm not sure as to why only the first square shows "Chargez une image", but have one remark:

If you want to match the last image (conteneurImagesSup4) also, make sure that the for loop's i reaches 4: for (var i = 0; i < 5; i += 1)

answered Jul 25, 2016 at 11:38

Bart

1,6092 gold badges14 silver badges29 bronze badges

1 Comment

Remi Hirtz Over a year ago

yes it does, because the click event is working on every field

Remi Hirtz · Accepted Answer · 2016-07-25 16:39:56Z

1

Ok I solved the jquery issue, you need to pass the i value to the event data or you will always have the last value of i. https://api.jquery.com/event.data/

But still cannot resolve the css problem.

answered Jul 25, 2016 at 16:39

Remi Hirtz

1443 silver badges16 bronze badges

Collectives™ on Stack Overflow

Mulitple file inputs display issues with css and javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related