Question

我正在尝试创建一些代码来工作。但是，我一直都会遇到错误，而且我已经坚持了一段时间并且需要帮助。每当图像尝试添加到页面时，我得到：

<undefined src='(this is where the filepath is listed)'><undefined>

为什么标签不是div？

Css代码：

.clock{
    background-image:url('');
    background-size:cover;
    background-position: center;
    height: 250px; width: 250px;
    border: 1px solid #bbb;
}
#myUL{
    height: 1000px;
    width: 1000px;
    }

Html代码：

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

脚本代码：

function readURL(){
    var file = document.getElementById("getval").files[0];
    var reader = new FileReader();
    reader.onloadend = function(){
         var div = document.createElement(div);
         div.setAttribute("src", "url(" + reader.result + ")");
         div.class = 'clock';
         document.getElementById('myUL').appendChild(div);
    }
    if(file){
        reader.readAsDataURL(file);
    }else{}
}

Answer 1

var div = document.createElement(div); // <<< (div) is a variant.

请参阅https://jsfiddle.net/3L53bzx5/1/

reader.onloadend = function() {
  var img = document.createElement('img');
  img.setAttribute("src", reader.result);
  img.className = 'clock';
  document.getElementById('myUL').appendChild(img);
}

Answer 2

您必须更改以下行

var div = document.createElement(div);

到

   var div = document.createElement('div');

在readURL（）方法中。

为什么我的DOM div被创建为未定义

2 个答案: