如何用JS实现图片文件与URL输入并添加至对应数组展示？

我想在HTML容器展示的数组中添加新项，需要获取图片文件和URL输入值，根据选中的选项把内容推送到指定数组，但现有代码无法实现。我试过用if (newCover != "" & newTrailer != "")，甚至把输入类型从file改成url，还是没解决问题。

相关HTML代码 #

<input type="file" name="comic-cover" id="comic-cover" required accept="image/jpg, image/jpeg"/>
<input type="url" name="comic-url" id="comic-url" placeholder="url" required />

<select name="publisher-list" id="publisher">
    <option value="publisher" disabled selected>Publisher</option>
    <option value="dc">DC Comics</option>
    <option value="marvel">Marvel</option>
</select>

<button type="button" class="btn-submit">Add</button>

<h2 class="comic-publisher">DC Comics</h2>
<div class="dc" id="block-dc"></div>

<h2 class="comic-publisher">Marvel</h2>
<div class="marvel" id="block-marvel"></div>

相关JS代码（原错误版本） #

var comicCovers = ["imgs/Dark Knights of Steel-000.jpg", "imgs/Hawkeye-000.jpg"]
var trailers = ["https://www.youtube.com/watch?v=WspmgrmEgn4", "https://www.youtube.com/watch?v=ssj0P0uY08U"]
var publishers = [0, 1];
var i = 0;
var blockDC = document.querySelector("#block-dc");
var blockMarvel = document.querySelector("#block-marvel");

render()

var publisher = document.querySelector("select").value;
document.querySelector("select") = function renderPublisher() {
    publisher = document.querySelector("select").value;
    return publisher;
}

// add new comics to the list // 
document.querySelector(".btn-submit") = function addOnList() {
    var newCover = document.querySelector("#comic-cover");
    var newTrailer = document.querySelector("#comic-url");

    if (newCover.endsWith(".jpg") & newTrailer.startsWith("https://")) {
        if (publisher == "dc") {
            publisher.push(0);
        } else {
            publisher.push(1)
        }

        comicCovers.push(newCover.value);
        trailers.push(newTrailer.value);
        newCover.value = "";
        newTrailer.value = "";
        render()
    }
}


function render() {
    for (i; i < comicCovers.length; i++) {
        // creates the comic covers using js var //
        var comicCover = document.createElement("img");
        comicCover.setAttribute("src", `${comicCovers[i]}`);

        // creates trailer button //
        var trailerButton = document.createElement("button");

        //  //
        var container = document.createElement("div");
        container.setAttribute("class", "container");
        container.appendChild(trailerButton);
        container.appendChild(comicCover);
        blockDC.appendChild(container);
        trailerButton.appendChild(document.createTextNode("Trailer"));
        trailerButton.setAttribute("class", "trailer-button");
        trailerButton.setAttribute("onclick", `openTrailer("${trailers[i]}")`);

        if (publishers[i] == 0) {
            blockDC.appendChild(container);
        } else {
            blockMarvel.appendChild(container);
        }
    }
}

核心错误点 #

1. 事件绑定完全错误
   不能直接给DOM元素赋值函数，正确的方式是使用addEventListener绑定change或click事件。

2. File输入处理错误

   • File类型输入的value是浏览器伪路径，无法直接作为图片src；需要用FileReader读取文件生成可预览的Blob URL。
   • 不能直接对File输入元素调用endsWith，要先获取选中的File对象，再判断其name属性。

3. 逻辑运算符误用
   用了位运算符&，应该用逻辑与运算符&&。

4. 数组操作对象错误
   要往publishers数组添加值，却错误地调用了publisher.push()（publisher是选中的字符串值，不是数组）。

5. Render函数循环问题

   • 使用全局变量i导致第二次调用render时，循环从上次的索引开始，而非从头遍历。
   • 循环中重复将container添加到blockDC，导致元素重复渲染。

6. 选中值获取时机错误
   应该在点击添加按钮时，实时获取当前选中的publisher值，而不是页面加载时只获取一次。

修复后的完整代码 #

// 初始化数据
const comicCovers = ["imgs/Dark Knights of Steel-000.jpg", "imgs/Hawkeye-000.jpg"];
const trailers = ["https://www.youtube.com/watch?v=WspmgrmEgn4", "https://www.youtube.com/watch?v=ssj0P0uY08U"];
const publishers = [0, 1];
const blockDC = document.querySelector("#block-dc");
const blockMarvel = document.querySelector("#block-marvel");
const coverInput = document.querySelector("#comic-cover");
const urlInput = document.querySelector("#comic-url");
const publisherSelect = document.querySelector("#publisher");
const addBtn = document.querySelector(".btn-submit");

// 初始渲染
render();

// 绑定添加按钮点击事件
addBtn.addEventListener("click", addOnList);

function addOnList() {
    const selectedFile = coverInput.files[0];
    const newTrailer = urlInput.value.trim();
    const selectedPublisher = publisherSelect.value;

    // 验证输入
    if (!selectedFile || !newTrailer.startsWith("https://") || selectedPublisher === "publisher") {
        alert("请选择jpg图片、输入合法URL并选择出版社");
        return;
    }

    // 读取图片文件生成预览URL
    const reader = new FileReader();
    reader.onload = function(e) {
        // 将数据推入数组
        comicCovers.push(e.target.result);
        trailers.push(newTrailer);
        publishers.push(selectedPublisher === "dc" ? 0 : 1);

        // 清空输入
        coverInput.value = "";
        urlInput.value = "";
        publisherSelect.value = "publisher";

        // 重新渲染
        render();
    };
    reader.readAsDataURL(selectedFile);
}

function render() {
    // 先清空容器，避免重复渲染
    blockDC.innerHTML = "";
    blockMarvel.innerHTML = "";

    // 遍历所有数据项
    for (let i = 0; i < comicCovers.length; i++) {
        // 创建元素
        const container = document.createElement("div");
        container.className = "container";

        const comicCover = document.createElement("img");
        comicCover.src = comicCovers[i];

        const trailerButton = document.createElement("button");
        trailerButton.className = "trailer-button";
        trailerButton.textContent = "Trailer";
        trailerButton.addEventListener("click", () => openTrailer(trailers[i]));

        // 组装元素
        container.appendChild(trailerButton);
        container.appendChild(comicCover);

        // 根据出版社添加到对应容器
        if (publishers[i] === 0) {
            blockDC.appendChild(container);
        } else {
            blockMarvel.appendChild(container);
        }
    }
}

// 补充openTrailer函数（原代码未提供）
function openTrailer(url) {
    window.open(url, "_blank");
}

额外说明 #

• 如果你的需求是直接输入图片URL而非上传本地文件，可以把#comic-cover改成type="url"，然后在addOnList里直接取coverInput.value，不需要FileReader逻辑。
• 修复后的代码使用let/const替代var，避免全局变量污染；用事件监听替代错误的赋值方式；每次渲染前清空容器，避免重复添加元素。

内容的提问来源于stack exchange，提问作者Oliwer