Mulitple Dateieingaben zeigen Probleme mit CSS und

Question

Hallo habe mehrere Eingänge zum Hochladen von 5 Bildern, aber das Problem ist, dass die CSS nicht richtig angezeigt wird (es betrifft nur die erste für den Textblock) und das Javascript reagiert nicht zur richtigen Eingabe.

So habe ich diesen HTML-Struktur für den 5-Eingang:

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

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

Was uns dieses Ergebnis geben, wo wir die vier Textblock fehlt sehen:

Und schließlich das Javascript, wenn ich ein Bild hinzufügen e Ich möchte es in dem entsprechenden Feld angezeigt werden, sondern unabhängig von der Art, wie ich die img entspricht es der letzte nur beeinflussen verwenden beeinflusst:

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

Was uns gibt:

Answer 1

Ich kann dir nur die Sache mit dem Bild erklären, das immer im letzten Quadrat angezeigt wird.

Sie haben eine for-Schleife:

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

die gleich als ist:

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

} 

Also, wenn die folgende ausgeführt:

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

hat i den Wert, den Sie will ihn haben.

Aber, wenn die „sub“ Funktion aufgerufen wird ($("#imageSup"+i).trigger('click');), i, dass für Umfang aus der erklärt wurde, hat derzeit den letzten Wert hatte (4).

Also, wenn Sie es richtig machen wollen, arbeiten, müssen Sie in den Anwendungsbereich der für eine neue Variable deklarieren:

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

Answer 2

ich bin nicht sicher, warum nur den ersten Platz zeigt " Chargez une image“, haben aber noch eine Bemerkung:

• Wenn Sie das letzte Bild (conteneurImagesSup4) auch passen wollen, stellen Sie sicher, dass die for Schleife des i erreicht 4: for (var i = 0; i < 5; i += 1)

Answer 3

Ok, ich habe das jquery-Problem gelöst, Sie müssen den i-Wert an die Ereignisdaten übergeben, sonst haben Sie immer den letzten Wert von i. https://api.jquery.com/event.data/

Aber immer noch kann das CSS-Problem nicht lösen.