Как отобразить загруженное изображение в CSS фоновом свойстве URL, используя API входного файла - vanilla Javascript - PullRequest
Новая
       51

Как отобразить загруженное изображение в CSS фоновом свойстве URL, используя API входного файла - vanilla Javascript

0 голосов
/ 13 апреля 2020

В первоначальном проекте был массив с именами файлов, которые там хранятся, и слайдер изображений будет отображать их.

Я пытаюсь создать функцию загрузки, где пользователь может загрузить изображение, и это изображение затем будет помещено в массив.

Я попытался использовать метод URL.createObjectURL в загруженном файле и отправить его на экран, но при достижении слайдом индекса массива возникает ошибка.

Файл выглядит как blob: http et c ... и поэтому я попытался удалить blob из строки и все еще получаю сообщение об ошибке.

HTML: 

<div id="container">
    <button class="button" id="leftButton"><i class="fa fa-arrow-left"></i></button>
    <button class="button" id="rightButton"><i class="fa fa-arrow-right"></i></button>
</div>

<div class="upload">
    <p><input type='file' name='image' id="input"></p>

</div>

CSS: 

#container {
    margin: 100px auto;
    height: 500px;
    width: 900px;
    border: 7px solid #3e92cc;
    border-radius: 10px;
    background: url('images/one.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Javascript: 

let container = document.getElementById("container");
let rightButton = document.getElementById("rightButton");
let leftButton = document.getElementById("leftButton");
let images = ["one.jpg", "two.jpg", "three.jpg", "four.jpg", "five.jpg"];

let imagesIndex = 0;

const inputElement = document.getElementById("input");

let newURL;

//Add background to slider
function addBackground() {

    if (!images[imagesIndex].includes('http')) {
        container.style.background = `url('images/${images[imagesIndex]}')`;
    } else {
        container.style.background = `url('${images[imageIndex]}')`;
    }
    container.style.backgroundPosition = "center";
    container.style.backgroundRepeat = "no-repeat";
    container.style.backgroundSize = "cover";
}

// upload files 
function handleFiles() {
    const fileList = this.files; /* now you can work with the file list */
    const objectURL = window.URL.createObjectURL(fileList[0]);

    //remove 'blob:';
    newURL = objectURL.replace('blob:', '');
    console.log(newURL);
    images.push(newURL);
}

// Event listeners
inputElement.addEventListener("change", handleFiles, false);

rightButton.addEventListener("click", function () {
    imagesIndex++;

    if (imagesIndex >= images.length) {
        imagesIndex = 0;
    }
    console.log(imagesIndex);
    addBackground();
})

leftButton.addEventListener("click", function () {
    imagesIndex--;

    if (imagesIndex < 0) {
        imagesIndex = images.length - 1;
    }
    console.log(imagesIndex);
    addBackground();
})

1 Ответ

0 голосов
/ 13 апреля 2020

Не удалять BLOB-объекты: требуется в схеме URL 

// upload files 
function handleFiles() {
    const fileList = this.files; /* now you can work with the file list */
    const objectURL = window.URL.createObjectURL(fileList[0]);

    //remove 'blob:';
    //newURL = objectURL.replace('blob:', '');
    console.log(objectURL);
    images.push(objectURL);
}

Исправлена ​​опечатка в imagesIndex

//Add background to slider
function addBackground() {

    if (!images[imagesIndex].includes('http')) {
        container.style.background = `url('images/${images[imagesIndex]}')`;
    } else {
        container.style.background = `url('${images[imagesIndex]}')`;
    }

    //.. other code
}
...