我有一個博客發布系統。問題是當我嘗試使用 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>
1 回答
Helenr
TA貢獻1780條經驗 獲得超4個贊
您可以用來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>
- 1 回答
- 0 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消