javascript - 如何将上传的图像添加到对象数组中？-6ren

javascript - 如何将上传的图像添加到对象数组中？

转载作者：行者123 更新时间：2023-11-28 03:24:16

我正在创建一个相册网站只是为了学习 Javascript。我有输入框来添加专辑的标题、艺术家和年份。当按下“添加专辑”时，它会将此信息插入到名为 albumList 的对象上的数组中，然后在列表元素中显示该信息。我想知道是否可以允许用户上传图像，该图像也被插入数组并与标题、艺术家和年份一起显示。

我已经尝试了我能想到的一切，并用谷歌搜索了一整天，但没有成功。这可能吗？这是我目前的 JS，我已经删除了我尝试上传图像的所有内容，以便给我一个干净的状态，可以这么说:

var albumList = {
    albums: [],
    addAlbum: function(title, artist, year) {
        this.albums.push({
            title,
            artist,
            year
        });
    }

};


var handlers = {
    addAlbum: function() {
        var addAlbumTitle = document.getElementById("addAlbumTitle");
        var addAlbumArtist = document.getElementById("addAlbumArtist");
        var addAlbumYear = document.getElementById("addAlbumYear");

        albumList.addAlbum(addAlbumTitle.value, addAlbumArtist.value, addAlbumYear.valueAsNumber);
        view.displayAlbums();
    }
};


//Only used to display info on screen. 
var view = {
    displayAlbums: function() {
        var albumUl = document.querySelector('ul');
        albumUl.innerHTML = '';

        albumList.albums.forEach(function(album, position) {
            var albumLi = document.createElement('li');
            var showAlbum = '';
            showAlbum = album.title + ' ' + album.artist + ' ' + album.year;

            albumLi.id = position;
            albumLi.textContent = showAlbum;
            albumUl.appendChild(albumLi);
        });
    }

};

还有我的 HTML:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <h1>My top 100 albums</h1>   

    <div>
        <input id="addAlbumTitle" type="text" placeholder="Title">
        <input id="addAlbumArtist" type="text" placeholder="Artist">
        <input id="addAlbumYear" type="number" placeholder="Year">   
    </div>

    <button onclick="handlers.addAlbum()">Add Album</button>

    <ul></ul>

    <script src="test.js"></script>
</body>



</html>

最佳答案

假设您将看到一个屏幕，您将在其中手动输入专辑信息，您还可以添加一个用于上传文件的输入，就像 Carl 在这个答案中所做的那样:

https://stackoverflow.com/a/31710348/10355063

var fileTag = document.getElementById("filetag"),
    preview = document.getElementById("preview");

fileTag.addEventListener("change", function() {
  changeImage(this);
});

function changeImage(input) {
  var reader;

  if (input.files && input.files[0]) {
    reader = new FileReader();

    reader.onload = function(e) {
      preview.setAttribute('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

从那里，您应该能够创建一个 Image 对象并将其正常添加到您的数组中。从那里获取对象的 src 并将其与专辑信息的其余部分一起显示。

<input type="file" id="filetag">
<img src="" id="preview">

关于javascript - 如何将上传的图像添加到对象数组中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58804693/

文章推荐： html - 如何在文本区域的右侧启动光标？

文章推荐： html - 独立于

首页

博学

6Ren·AI

商城

javascript - 如何将上传的图像添加到对象数组中？