javascript - Javascript-如何创建元素,将其添加到数组中并显示它

原文 标签 javascript html oop object

我正在尝试创建一个网络应用程序,该应用程序允许用户从其PC上传图像,然后,它将创建一个对象,并将其添加到数组中(以记录它及其属性)并显示它在屏幕上。

我创建了一个代码笔:https://codepen.io/eve_mf/pen/XebVWv

的HTML:

 <form id="form" action="" method="post" enctype="multipart/form-data">
  <div class="file-uploader-wrapper">
      <input id="file-uploader" class="file-uploader-input" type='file' onchange="retrieveImageFromUpload(this);"/>
      <button class="file-uploader-btn" type="button">Select an image</button>
  </div>
</form> 

 <div id="map-view"></div>


js:

let allImages = [];
let displayImages = document.getElementById("map-view");
let imagesCounter = 0;

$(".file-uploader-btn").click(function() {
  $("#file-uploader").click();
});

function retrieveImageFromUpload() {
   let imgReader = new FileReader();
   imgReader.readAsDataURL(document.getElementById("file-uploader").files[0]);

   imgReader.onload = function (imgReaderEvent) {
        let imageUploadedName = imgReaderEvent.target.result;
        return readUploadedImage(imageUploadedName);
    };
}

//create HTML image from the uploaded img
function readUploadedImage(imageUploadedName) {

  imagesCounter++;

  let img = document.createElement('img');
  img = {
    "id": 'screen-' +  imagesCounter,
    "src": imageUploadedName,
    "alt": 'Default-alt'
  };

 allImages.push(img);

  console.log(allImages);

var imgHTML = img.cloneNode(true);
imgHTML = "<img id='"+ img.id + "' src='" + img.src + "' alt ='" + img.alt + "' />";
displayImages.appendChild(imgHTML);

console.log("-------------");

}


创建图像元素后,我的问题开始了;我想我感到困惑,但我无法真正理解在哪里或为什么。


我使用“ let img = document.createElement('img');”创建图像
然后,我将其属性设置为对象,我认为它是在这里弄乱的。然后,将这个对象放入数组(称为allImages)中,这就是我到目前为止想要的。
但是,从将该对象添加到我的数组中之后,我想将其显示为HTML图像,我正在尝试使用“ appendChild”,但这绝对是错误的,因为我得到的错误是我没有使用节点元素。


有人可以推动我走上正确的道路吗?

谢谢

最佳答案

在这里,我更正了您的codepen

您必须创建一个DOM element才能将其添加到页面中:

var imgHTML = document.createElement("IMG");
imgHTML.setAttribute("id", img.id);
imgHTML.setAttribute("src", img.src);


经过测试和工作。

关于javascript - Javascript-如何创建元素,将其添加到数组中并显示它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46238138/

相关文章:

javascript - 为什么在JavaScript中不将图像输入按钮视为表单的子元素?

javascript - FireStore,在Web客户端进行CRUD操作安全吗?

javascript - 无法创建所需的UI

javascript - 如何使用W3C标签样式链接到特定标签

javascript - 仅使表格中突出显示的单元格值

java - 我应该使用静态方法还是公共(public)方法…android

javascript - javascript循环遍历具有类名的表行

javascript - 如何使用jQuery Mobile同步setTimeout和mobile.navigate?

c# - 单元测试 DateTime.Now

c# - 为什么要避免在C#中创建MutableTuple <T1,T2,TEtc>类?