Question

我正在尝试创建一个Web应用程序，允许用户从他们的pc上传图像，然后，它将创建一个对象，并将其添加到一个数组中（以记录它及其属性）并在屏幕上显示。

我创建了一个codepen：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("-------------");

}

我的问题在创建图像元素后开始;我觉得我很困惑，但我真的不明白在哪里或为什么。

我使用＆＃34生成图像;让img = document.createElement（＆＃39; img＆＃39;）;＆＃34;
然后，我将其属性设置为对象，我认为它在这里我搞砸了。然后，我把这个对象放入我的数组（称为allImages），所以，这就是我想要的。
但是，从将这个对象添加到我的数组中的一部分，我想将其显示为HTML图像，我正在尝试使用＆＃34; appendChild＆＃34;，但绝对是非常错误的因为我得到了错误，我没有使用节点元素。

有人可以推动我走向正确的道路吗？

谢谢

Answer 1

我在这里更正了您的codepen。

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

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

经过测试和工作。

Answer 2

您正在将img重新定义为常规对象字面值，从而在此过程中丢失图像。

您必须逐个设置属性

let img = document.createElement('img');
img.id  = 'screen-' +  imagesCounter;
img.src = imageUploadedName;
img.alt = 'Default-alt;

你所做的与

几乎相同

＆＃13;

let x = 'image';

x = {id : 4};

console.log(x); // no suprise, it's just {id : 4} and the string was lost

＆＃13;

Answer 3

是节点元素：

let img = document.createElement('img');

但是你摆脱了node元素并用自定义对象替换它：

img = {
  //...
};

这完全删除了节点元素，现在 all img具有这三个属性的自定义对象。而不是创建新对象，只需直接设置属性：

let img = document.createElement('img');
img.id = 'screen-' +  imagesCounter;
img.src = imageUploadedName;
img.alt = 'Default-alt';

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

3 个答案: