如何使用输入文件 API 在 CSS 背景 URL 属性 中显示上传的图像 - vanilla Javascript

Question

最初的项目有一个数组，其中存储了文件名，图像滑块会显示它们。

我正在尝试创建上传功能，用户可以在其中上传图像，然后将该图像推送到数组。

我已经尝试在上传的文件上使用 URL.createObjectURL 方法并将其推送到显示器，但是当幻灯片到达数组索引时出现错误。

文件输出为 'blob:http etc...'，所以我尝试从字符串中删除 '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
}