如何将上传的图像添加到对象数组中? [英] How can I add an uploaded image into an object array?
问题描述
我正在创建一个专辑网站，只是为了学习Javascript.我有输入框，用于添加专辑的标题，艺术家和年份.当按下添加相册"时，它将此信息插入到名为AlbumList的对象的数组中，然后在列表元素中显示该信息.我想知道是否可以允许用户也上传图像，该图像也被推送到数组中并与标题，艺术家和年份一起显示.
I am creating an album website just to learn Javascript. I have input boxes to add the title, artist, and year of an album. When "Add Album" is pressed, it inserts this info into an array on an object called albumList, then displays the info in list elements. I want to know if it's possible to allow the user to also upload an image, which is also pushed into the array and displayed along with the title, artist, and year.
我尝试了所有可以想到的事情，并用了整整一天的时间搜索了一下Google，但是没有运气.这有可能吗?这是我目前的JS，我删除了我尝试上传图片时所做的所有操作，以便给我一个干净的状态，可以这么说:
I have tried everything I can think of and googled for a whole day but no luck. Is this even possible? This is my JS currently, I have removed everything I tried to do with uploading images to give me a clean slate, so to speak:
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>
推荐答案
我相信您滥用了上载"一词.由于您只在客户端玩游戏，因此您实际上并没有在任何地方上传任何内容.
I believe that you misuse the word "upload". Since you are only playing client-side, you are not really uploading anything anywhere.
您可以使用 <输入类型='文件'> ，然后使用 blob 将数据存储在数组中.由于输入提供的 File 对象只是特定的Blob类型，无需进行任何转换即可存储数据.
You can load a local image file provided by the user using <input type='file'> and then use blobs to store the data in your array. Since the File object provided by the input is just a specific type of blob, no conversion is necessary to store the data.
You can than display images stored in blobs by setting the src attribute of an image to a URL created using URL.createObjectURL.
这是一个有效的示例:
'use strict';
const myImages = [];
function addImage(imageBlob) {
myImages.push(imageBlob);
}
function redrawImages() {
const divForImages = document.getElementById('myImages');
divForImages.innerHTML = '';
myImages.forEach((imageBlob) => {
const img = document.createElement('img');
img.src = URL.createObjectURL(imageBlob);
divForImages.appendChild(img);
});
}
function addImageAndRedraw() {
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 1) {
addImage(fileInput.files[0]);
redrawImages();
} else {
alert('No file selected. Select a file and try again.');
}
}
const button = document.getElementById('button');
button.addEventListener('click', addImageAndRedraw);<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My images</h1>
<input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
<input id="button" type="button" value="Add image and redraw">
<hr>
<div id="myImages"></div>
<script src="album.js"></script>
</body>
</html>这篇关于如何将上传的图像添加到对象数组中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
