Как сделать предпросмотр изображений при загрузке с input type=[file]?

Мне подходит вот это решение. Но, как-то мне кажется, подключать целую гору (без преувеличения) библиотек ради простой, казалось бы, задачи - это откровенное издевательство.
Уж простите за офтоп, но всё это мне напоминает это вот эту статью.

sazhyk: не вижу там горы, но дело Ваше. Если не использовать плагины ради того что бы меньше подключать, тогда просто на html стоит писать и css inline стилями.

Максим Тимофеев: к тому же вся эта "гора" конфликтует с другой библиотекой. Вот с этой. А она мне нужна, и очень.

Может проще конфликт решить. Хотя dropzonejs использую достаточно давно и часто, конфликтов не было.

Извините, но такой вариант мне не подходит. Предполагается, что к одной карточке (см. картинку в вопросе) можно добавить только одну фотку.

если я правильно вас понял

Ну вообще было бы странно, если бы в 1 тэг img можно было бы внести больше одной картинки.

sazhyk: если нужно 4 карточки, можете создать по одному input на каждую карточку и по одному img для отображения картинки. Можно обойтись одним input. Но тэгов img так или иначе все равно придется создавать столько, сколько изображений должно будет отображаться.

dummyman:

Ну вообще было бы странно, если бы в 1 тэг img можно было бы внести больше одной картинки.

это я понимаю.

Смотрите, сейчас получается такое:

<div id="badge-1" class="badge">
    <div class="badge-body">
        <div class="badge-header"></div>
        <div class="photo-bg">
            <div class="photo">
                <img class="image" src="" alt="">
                <div class="upload-file-container">
                    <input type="file" class="imgUpload" required="required" />
                </div>
            </div>
        </div>
        <div class="badge-name">
            <p class="name">
                <input type="text" placeholder="Фамилия" required="required" maxlength="15" />
            </p>
            <p class="name">
                <input type="text" placeholder="Имя" required="required" maxlength="15" />
            </p>
        </div>
    </div>
</div>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.image').attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    $(".imgUpload").change(function(){
        readURL(this);
    });
</script>

Новый бейдж будет с id="badge-2". Они (бейджи) могут добавляться на страницу. И у каждого нового будет этот счетчик id будет увеличиваться.
Нельзя ли просто переписать/дописать код js (думаю можно, просто я не знаю как), что бы обработка происходила внутри блока с тем ID, по дочернему элементу (input) которого кликнули? Блин, вроде понятно попытался выразиться. Уж извините мне мои глупые вопросы.

sazhyk: Можно сделать одну скрытую копию всего хозяйства (например, badge-0), когда нужен еще один блок, копировать его $('#badge-0').clone(true, true).appendTo('body')

как то так, правда над параметрами там еще надо потестировать разные варианты.

dummyman: да вопроса как копировать не стоит. В этом проблемы нет. Как просмотр картинки делать только в том блоке, в котором по инпуту кликнули?

Ну ты смотри на селекторы $(".imgUpload") можно вот так $("#badge-1 .imgUpload")

dummyman: но #badge-N у каждого свой, т.е. #badge-1, #badge-3, #badge-3 ... #badge-N.

sazhyk: так в этом вся суть, если бы он был одинаковый, по селектору выбирались бы все сразу.

можно прописать в каждый input атрибут например x-data-id="1". получать его $(input).attr('x-data-id')