JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<form id="form1" runat="server">
    <input type='file' id="imgInp" name="images[]" class="uploads" size="chars" />
    <div id="full_sized_div">
        <img src="http://upload.wikimedia.org/wikipedia/commons/3/3d/My_personal_black_cat.gif" alt="Audi" id="full_sized_img" />
    </div>
    <input type='file' id="imgInp2" name="images[]" class="uploads" size="chars" />
    <div id="overlay_div">
        <img src="http://upload.wikimedia.org/wikipedia/commons/b/b9/Farm-Fresh_cat.png" alt="Audi advert" id="overlay_img" />
    </div>
</form>

CSS

input {
      display: block;
      visibility: hidden;
      width: 0;
      height: 0;
  }

JavaScript

$('#full_sized_div').click(function () {
    $('#imgInp').click();
});
$('#overlay_div').click(function () {
    $('#imgInp2').click();
});

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

        reader.onload = function (e) {
            $('#full_sized_img').attr('src', e.target.result);
        }

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

function readURL2(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#overlay_img').attr('src', e.target.result);
        }

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

$("#imgInp").change(function () {
    readURL(this);
});
$("#imgInp2").change(function () {
    readURL2(this);
});