Question

你有多个输入来上传5张图片，但问题是css没有正确显示（它只影响文本块的第一个）并且javascript没有对正确的输入作出反应。

所以我有5个输入的html结构：

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

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

这给了我们这个结果，我们可以看到缺少4个文本块：

最后是javascript，当我添加图片时，我希望它显示在相应的字段中，但是，无论我使用什么方式影响img对应它只影响最后一个：

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

这给了我们：

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

Answer 2

我不确定为什么只有第一个广场显示＆＃34; Chargez une image＆＃34;，但有一句话：

如果您还要匹配上一张图片（conteneurImagesSup4），请确保for圈i达到4：for (var i = 0; i < 5; i += 1)

Answer 3

好的我解决了jquery问题，你需要将i值传递给事件数据，否则你将始终拥有i的最后一个值。 https://api.jquery.com/event.data/

但仍然无法解决css问题。

多个文件输入显示css和javascript的问题

3 个答案: