Как отобразить несколько загруженных пользователем изображений в отдельных div перед отправкой формы - PullRequest
Новая
       4

Как отобразить несколько загруженных пользователем изображений в отдельных div перед отправкой формы

0 голосов
/ 27 марта 2020

У меня есть проект, над которым кто-то еще работал, и я получаю некоторый опыт, внося в него изменения и дополнения. Он попросил меня взять страницу с html пользовательской кнопкой для загрузки файла / изображения, которая затем отображает изображения на экране перед отправкой их в базу данных, и преобразовать формат отображения в Swiper JS.

После загрузки каждое изображение получает новый упорядоченный идентификатор (ie image_number_1, image_number_2 и т. Д. c) и в настоящее время отображается в виде одного элемента div, по которому можно щелкнуть. Для запрашиваемого Swiper каждое изображение должно быть go в отдельном элементе div / swiper-slide внутри элемента swiper-container. Как лучше всего сделать второе изображение go во втором div и т. Д.?

Это формат, необходимый для go в: 

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img id="image_number_1"></div>
        <div class="swiper-slide"><img id="image_number_2"></div>
        <div class="swiper-slide"><img id="image_number_3"></div>
    </div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
...