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

Question

[sazhyk]

Делал предпросмотр для одного загруженного изображения по вот этому вопросу. Всё ничего, но надо делать предпросмотр для нескольких изображений на странице. Как быть? Там в комментах к вопросу есть такой "подвопрос"
Находил вариант, где делаются предпросмотры для "пачки" изображений разом, но мне это не подходит. Изображения добавляются вручную в разные инпуты. Выглядит в итоге это примерно так
Подскажите, как это дело реализовать?

Answer 1

[Максим Тимофеев]

https://github.com/blueimp/jQuery-File-Upload
https://blueimp.github.io/JavaScript-Load-Image/
www.dropzonejs.com

Comments

[sazhyk]

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

[Максим Тимофеев]

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

[sazhyk]

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

[Максим Тимофеев]

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

Answer 2

[dummyman]

Когда в input[type=file] выбрал диалогом файлы или кинул их через dragndrop, у тебя в input.files будет массив с локальными путями к файлам пользователя. просто создаешь новый < img > и в src= устанавливаешь локальный путь к изображению и браузер его подцепит с локального диска.

Comments

[sazhyk]

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

[sazhyk]

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

[dummyman]

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

[dummyman]

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

[sazhyk]

dummyman:

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

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

[sazhyk]

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

<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) которого кликнули? Блин, вроде понятно попытался выразиться. Уж извините мне мои глупые вопросы.

[dummyman]

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

[dummyman]

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

[sazhyk]

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

[dummyman]

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

[sazhyk]

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

[dummyman]

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

[dummyman]

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

Answer 3

[Антон Антон]

https://developer.mozilla.org/ru/docs/Using_files_...

Answer 4

[alex maslakoff]

можно через FileApi в html5