如何在 CSS 背景中顯示上傳的圖像

Question

初始項目有一個數組，其中存儲了文件名，圖像 slider 將顯示它們。

我正在嘗試創建上傳功能，用戶可以在其中上傳圖像，然后將該圖像推送到數組。

我嘗試在上傳的文件上使用 URL.createObjectURL 方法並將其推送到顯示器，但是當幻燈片到達數組索引時出現錯誤。

該文件以“blob：http 等...”的形式出現，所以我嘗試從字符串中刪除“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();
})

Answer 1

不要刪除 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
}