如何使用两个分离的图像上传预览？

Question

所以我找到了一个很棒的代码片段，我想在我的代码中使用它，它是：https://codepen.io/siremilomir/pen/jBbQGo

我的问题是我想并排使用其中的两个。我重写了 ID，使用新 ID 将脚本复制了两次，但我很确定这不是我应该做的。不幸的是，我真的很不擅长 JavaScript，我想问题是这个函数到处都接受相同的 input 一些我不知道它是什么的东西。

另一个问题是FontAwesome图标不显示，请问是什么问题？我读了这个 post 并尝试了所有方法但仍然不起作用：Font Awesome & Unicode

我试过这个：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#indexImage1').css('background-image', 'url('+e.target.result +')');
            $('#indexImage1').hide();
            $('#indexImage1').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#indexImage1Upload").change(function() {
    readURL(this);
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#indexImage2').css('background-image', 'url('+e.target.result +')');
            $('#indexImage2').hide();
            $('#indexImage2').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#indexImage2Upload").change(function() {
    readURL(this);
});

body {
    background: whitesmoke;
    font-family: 'Open Sans', sans-serif;
}

.container {
    max-width: 960px;
    margin: 30px auto;
    padding: 20px;
}


.avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 50px auto;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input+label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}

.avatar-upload .avatar-edit input+label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-preview {
    width: 192px;
    height: 192px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-edit input+label::after {
    content: "\f040";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview>div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="avatar-upload">
        <div class="avatar-edit">
            <input type='file' id="indexImage1Upload" accept=".png, .jpg, .jpeg" />
            <label for="indexImage1Upload"></label>
        </div>
        <div class="avatar-preview">
            <div id="indexImage1" style="background-image: url(http://i.pravatar.cc/500?img=7);">
            </div>
        </div>
    </div>
    
    <div class="avatar-upload">
        <div class="avatar-edit">
            <input type='file' id="indexImage2Upload" accept=".png, .jpg, .jpeg" />
            <label for="indexImage2Upload"></label>
        </div>
        <div class="avatar-preview">
            <div id="indexImage2" style="background-image: url(http://i.pravatar.cc/500?img=7);">
            </div>
        </div>
    </div>
</div>

Answer 1

您正在使用两个同名函数。它无法分辨它们之间的区别。

您可以重命名这些函数，或者更好，因为它们在做同样的事情，您可以使用参数并以这种方式调用它们。

function readURL(inputElement, imageElement) {
    if (inputElement.files && inputElement.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            imageElement.css('background-image', 'url('+e.target.result +')');
            imageElement.hide();
            imageElement.fadeIn(650);
        }

        reader.readAsDataURL(inputElement.files[0]);
    }
}

然后当你设置监听器时。

$("#indexImage1Upload").on('change', function () {
    readURL(this, $('#indexImage1'));
});

$("#indexImage2Upload").on('change', function () {
    readURL(this, $('#indexImage2'));
});

你可以看到它在这里工作：https://jsfiddle.net/gv1Ls987/

如何使用两个分离的图像上传预览？

How can I use two separted image upload preview?

javascript

css

jquery

font-awesome-5