通过扫描输入 Javascript 创建图像

Question

我有一个博客发布系统。问题是当我尝试使用 Javascript 功能发布图像（输入的）时，createElement()它不起作用。

HTML和Js代码：

function publish() {

  var title = document.getElementById("title").value;

  var description = document.getElementById("description").value;

  var para = document.createElement("h3");

  var node = document.createTextNode(title);

  para.appendChild(node);

  var element = document.getElementById("posts");

  element.appendChild(para);

  var para = document.createElement("small");

  var node = document.createTextNode("--".concat(description, "--"));

  para.appendChild(node);

  var image = document.getElementById("posts")

  element.appendChild(para)

  var image = document.getElementById("image-file").value

  var para = document.createElement("img");

  var node = document.createTextNode(image);

  para.appendChild(node);

}

<button id="publish-button" onclick="publish()">Publish</button>

<p>Title</p>

<input class="Title" id="title"></input>

<p>Description</p>

<input class="Description" id="description"></input>

<p>Images</p>

<input id="image-file" type="file" />

<h1>The Blog</h1>

<ul id="posts"></ul>

Answer 1

您可以用来URL.createObjectURL()解决您的问题。请检查以下代码。&nbsp; var image = document.createElement("img");&nbsp; var imageInput = document.getElementById('image-file');&nbsp; image.src = URL.createObjectURL(imageInput.files[0]);&nbsp; image.style.height = '100px';&nbsp; image.style.width = '100px';&nbsp; para.appendChild(image);function loadFile(event) {&nbsp;&nbsp;}function publish() {&nbsp; var title = document.getElementById("title").value;&nbsp; var description = document.getElementById("description").value;&nbsp; var para = document.createElement("h3");&nbsp; var node = document.createTextNode(title);&nbsp; para.appendChild(node);&nbsp; var element = document.getElementById("posts");&nbsp; element.appendChild(para);&nbsp; var para = document.createElement("small");&nbsp; var node = document.createTextNode("--".concat(description, "--"));&nbsp; para.appendChild(node);&nbsp; element.appendChild(para)&nbsp;&nbsp;&nbsp; // Add image&nbsp; var image = document.createElement("img");&nbsp; var imageInput = document.getElementById('image-file');&nbsp; image.src = URL.createObjectURL(imageInput.files[0]);&nbsp; image.style.height = '100px';&nbsp; image.style.width = '100px';&nbsp;&nbsp;&nbsp; para.appendChild(image);}<button id="publish-button" onclick="publish()">Publish</button><p>Title</p><input class="Title" id="title"></input><p>Description</p><input class="Description" id="description"></input><p>Images</p><input id="image-file" type="file" accept="image/*" /><h1>The Blog</h1><ul id="posts"></ul>