使用javascript添加圖像爲div

我想將圖像作爲元素添加到我的網頁中。我無法這樣做。有關於如何預覽圖像的說明，但我無法找到解決方案。使用javascript添加圖像爲div

我想要做的是在網頁中添加一個帶有圖片的div，並不斷載入不同的圖片。因此，在添加圖像1後，我會在圖像1下載入同一網頁中的圖像2。

HTML機身碼：

<input type='file' id='getval' /><br/><br/> 
<span onclick="readURL()" class="addBtn">Add</span> 
<div id="myUL"></div>

javascript代碼：

<script type="text/javascript"> 
    // grabs image 
    var file = document.createElement('image'); 
    file.src = document.getElementById('getval').files[0]; 
    // creates div & assigns id 
    var div = document.createElement('div'); 
    div.id = 'item'; 

    // adds file to div 
    file.type = 'image'; 
    div.appendChild(file); 

    //adds item 
    document.getElementById("myUL").appendChild(div); 
} 
</script>

EDIT1 * 我認爲加上我要顯示將是HTML文檔中更好的代碼的輸出。

的JavaScript生成HTML代碼裏面的文件：在line

<div style="background-image":url("image");"><div>

來源

2017-05-08 user3435505

你可以使用這個腳本

count = 0; 
 
function viewImage(){ 
 
var imagefile = document.querySelector('#image'); 
 
       if (imagefile.files && imagefile.files[0]) { 
 
        var reader = new FileReader(); 
 
        reader.onload = function (e) { 
 
var content = '<img id="temp_image_'+count+'" style="border: 1px solid; width: 107px;height:107px;" >'; 
 
document.querySelector('#all_images').innerHTML += content; 
 
document.querySelector('#temp_image_'+count).setAttribute('src', e.target.result); 
 
        }; reader.readAsDataURL(imagefile.files[0]); 
 
        this.imagefile = imagefile.files[0]; 
 
        count++; 
 
       }else{ 
 
        console.log("Image not selected"); 
 
       } 
 
    }

<div id="all_images"> 
 
</div> 
 
<input id="image" name="image" type="file" onChange="viewImage()">

來源

2017-05-08 12:31:20 C2486

謝謝，但這不是我要求的。我詢問了可以作爲新的個人元素加載到網頁中的圖像。 – user3435505

@ user3435505：我想更新我的答案嗎？ – C2486

是的請〜有其他地方發佈的內容的腳本，我從其他帖子中獲得了我的代碼庫，並嘗試修改代碼以符合我的需求。但是，我無法這樣做:( – user3435505

在這裏你去，不過要注意的註釋3

<script type="text/javascript"> 
var file = document.createElement("img"); 
file.setAttribute("src", document.getElementById('getval').files[0]); //You can use HTML5 File API here 
file.setAttribute("height", "250"); 
file.setAttribute("width", "250"); 
var divTocreate = document.createElement('div'); 
divTocreate.id = 'item'; 
divTocreate.appendChild(file); 
document.getElementById("myUL").appendChild(divTocreate); 
</script>

來源

2017-05-08 12:24:41

嗨，我試過你的代碼。但是，當我將它添加到函數中時，它接近完成這項工作，在列表中添加一個新的圖像。但是，它沒有讀取圖像文件並檢查圖像，標籤以的形式出現。所以圖像沒有被讀取。 – user3435505

使用javascript添加圖像爲div

回答

相關問題