我正在创建一个相册网站只是为了学习 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/