我正在创建一个专辑网站只是为了学习 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>
假设您将有一个屏幕，您将在其中手动输入专辑信息，您还可以添加一个用于上传文件的输入，就像卡尔在这个答案中所做的那样：
https://stackoverflow.com/a/31710348/10355063 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">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
