Javascript - 如何創建元素，將其添加到數組中，並顯示它

我想創建一個web應用程序，它允許用戶從他們的pc上傳圖像，並從中創建一個對象，並添加它放入一個數組（記錄它及其屬性）並將其顯示在屏幕上。Javascript - 如何創建元素，將其添加到數組中，並顯示它

我創建了一個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("-------------"); 

}

創建圖像元素之後，我的問題開始;我覺得我很困惑，但我無法真正瞭解在哪裏或爲什麼。

我用「let img = document.createElement（'img'）;」創建圖像「
然後，我將它的屬性設置爲對象，我認爲這是我弄亂了。然後，我把這個對象放到我的數組中（稱爲allImages），所以，這就是我想要的。
但是，然後，將該對象添加到我的數組中的一部分，我想要顯示它爲HTML圖像，我正在嘗試與「appendChild」，但肯定是錯誤的東西，因爲我得到的錯誤，我不是使用節點元素進行操作。

有人能給我一個推動到正確的道路？

謝謝

來源

2017-09-15 eve_mf

這裏我更正了你的codepen。

你才能把它添加到頁面創建一個DOM element：

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

測試和工作。

來源

2017-09-15 11:26:14 arracso

你redifining img作爲一個普通的對象字面，在這個過程中失去的圖像。

你必須通過一個

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

你在做什麼是幾乎相同的一組屬性爲

let x = 'image'; 
 

 
x = {id : 4}; 
 

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

來源

2017-09-15 11:10:33 adeneo

這是節點元素：

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

但你擺脫了節點元素，並用自定義對象替換它：

img = { 
    //... 
};

這完全刪除的節點元素，現在所有img已經是與三個屬性自定義對象。不要創建一個新對象，直接設置屬性：

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

來源

2017-09-15 11:11:13 David

Javascript - 如何創建元素，將其添加到數組中，並顯示它

回答

相關問題