SO. 31157414 [Answer]

by Bright RYMER

HTML

<div class="col-lg-8">
    <div class="text-center">
        <div class="">
            <img src="" class="FILE_REA img-responsive">
        </div>
         <h4>Illustration N° 1 ...</h4>

        <input type="file" class="FILE_REA_ID" name="FILE_REA_ID1" runat="server" />
    </div>
</div>
<div class="col-lg-8" id="addbefore"> <a href="#" class="btn btn-link" id="addREA">Ajouter une illustration</a>

</div>

JavaScript

$(document).ready(function () {
    var num = 1;
    //event to create elements
    $("#addREA").click(function () {
        num = num + 1;
        if (num <= 4) {
            $("<div class='col-lg-8'><div class='text-center'><div class=''><img src='' class='FILE_REA" + num + " img-responsive'/></div><h4>Illustration N° " + num + "...</h4><input type='file' name='FILE_REA_ID" + num + "' class='FILE_REA_ID" + num + "'/></div></div>").insertBefore("#addbefore");
        } else {
            alert("The maximum files to add is four.");
        }
        
        console.log($(".FILE_REA_ID"));
    });
});

//Functions preview the existing image 
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(input);
            $('.FILE_REA').attr('src', e.target.result);
        };

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

$("input[class^=FILE_REA_ID]").on("change", function () {
    console.log("in");
    readURL(this);
});