通过扫描输入 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()解决您的问题。请检查以下代码。

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

  var imageInput = document.getElementById('image-file');

  image.src = URL.createObjectURL(imageInput.files[0]);

  image.style.height = '100px';

  image.style.width = '100px';

  para.appendChild(image);

function loadFile(event) {

  

}

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);

  element.appendChild(para)

  

  // Add image

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

  var imageInput = document.getElementById('image-file');

  image.src = URL.createObjectURL(imageInput.files[0]);

  image.style.height = '100px';

  image.style.width = '100px';

  

  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>