2

введите сюда описание изображенияПодскажите пожалуйста как загрузить картинки из json файла страницу.Есть json файл с url изображений и размерами (файл показан на картинке). Нужно что-бы при клике на кнопку открыть я выбирал файл json и выводил картинки на страницу по url.

upload('#file', {
    multi: true,
    accept: ['.png', '.jpg', '.jpeg', '.gif', '.json']
});


function upload(selector, options = {}) {
    let files = [];
    const input = document.querySelector(selector);
    const preview = document.querySelector('.preview');

    const open = document.createElement('button');
    open.classList.add('btn');
    open.textContent = 'Открыть';

    if(options.multi) {
        input.setAttribute('multiple', true)
    }

    if(options.accept && Array.isArray(options.accept)) {
        input.setAttribute('accept', options.accept.join(','))
    }

    
    input.insertAdjacentElement('afterend', open);

    const triggerInput = () => input.click(); 

    const changeHandler = (event) => {
        if(!event.target.files.length) {
            return
        }
        files = Array.from(event.target.files)

        files.forEach(file => {
            if (!file.type.match('image')) {
                return
            }
          
            const reader = new FileReader()

            reader.onload = ev => {
                const src = ev.target.result
                preview.insertAdjacentHTML('afterbegin', `
                <div class="preview-image">
                    <div class="preview-remove" data-name="${file.name}">&times;</div>
                    <img src="${src}" alt="${file.name}" />
                </div>
                `)
            }
            reader.readAsDataURL(file)
        })

    }

    const removeHandler = event => {
        if(!event.target.dataset.name) {
            return
        }

        const {name} = event.target.dataset
        files = files.filter(file => file.name !== name)

        const block = preview.querySelector(`[data-name="${name}"]`)
        .closest('.preview-image')

        block.remove()
    }

    open.addEventListener('click', triggerInput);
    input.addEventListener('change', changeHandler);
    preview.addEventListener('click', removeHandler);
};
.main {
    max-width: 860px;
    margin: 0 auto;
    min-height: 100vh;
}
.btn {
    color: rgb(73, 156, 224);
    position: relative;   
    border: 2px solid rgb(73, 156, 224);
    text-decoration: none;
    padding: 0.5rem;
    outline: none;
    cursor: pointer;
    background: #ffffff;
    border-radius: 20px;
    margin: 1rem;
    font-weight: 700;
}
.btn.primary {                              
    background: rgb(73, 156, 224);    
    color: #ffffff;
}
.btn.active {
    box-shadow: inset 1px 1px 1px rgb(0, 0, 0, 0.3);
}
.btn:hover {
    cursor: pointer;
    opacity: 0.8;
}
input[type=file] {
    display: none;
}
.preview {
    display: flex;
    flex-wrap: wrap; 
}
.preview-image {
    position: relative;
    height: 20vh;
    flex-grow: 1;
    margin: 5px;
    overflow: hidden;
}
.preview-image:last-child {
    flex-grow: 10;
}
.preview-image img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    transition: all 0.3s ease;
}
.preview-image img:hover {
    transform: scale(1.1);
}
.preview-image:hover .preview-remove {
    opacity: 1;
}
.preview-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 0;
    font-weight: bold;
    background: rgb(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
    transition: opacity .22s;
}
<div class="main">
   <input type="file" id="file">
   <div class="preview">
   </div>
</div>

1 ответ 1

0

Механизм не сложный

Используем цикл for

Я поясню что происходит: полный url картинки такой http://placehold.it/размер/цвет

такой api даёт сервис placehold.it я просто разбил по состовляющим и это видно из object из которого я по порядку вывоижу src + fill width height alt

let gallery = [{
  width: 640,
  height: 480,
  url: "http://placehold.it/640x480",
  fill: "9ca",
  alt: "Первое изображение"
}, {
  width: 640,
  height: 480,
  url: "http://placehold.it/640x480",
  fill: "9ff",
  alt: "Второе изображение"
}]
let html = "";
for (gal in gallery) {
  html += `<img src="${gallery[gal].url}/${gallery[gal].fill}" width="${gallery[gal].width}px" height="${gallery[gal].height}px" alt="${gallery[gal].alt}">`;
}

document.querySelector(".body").innerHTML = html;
<div class="body"></div>

3
  • Спасибо, это понял. Но как мне найти добраться к этому url , если он вообще находиться в другом файле.Как мне указать этот путь в моем коде, когда я буду кликать на кнопку "открыть" и выбирать json файл?
    – fron321
    21 мар 2021 в 7:09
  • @fron321 через fetch как в этом ответе: ru.stackoverflow.com/a/1258674/308951 21 мар 2021 в 7:34
  • @fron321 codepen.io/topicstarter/pen/qBqvLzK - вот подробнее - открой там console 21 мар 2021 в 7:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.