时间戳

首页 > 解决方案 > 如何获取输入类型 = 文件的值并将其显示在动态创建的图像上？

javascript - 如何获取输入类型 = 文件的值并将其显示在动态创建的图像上？

问题描述

我有以下代码：

function displayImg() {
  let fileUpload = document.getElementById("fileUpload").value;
  let container document.getElementById("container");
  container.innerHTML = `<img src="fileUpload">`
  
}
<input type = file id = "fileUpload" accept = "image/*">
<button onclick = "displayImg()">Click to show</button>
<div id="container"></div>

我想要它，以便用户可以将文件输入到文件输入字段中，并在单击按钮时将其放入动态创建的图像的源中。我该怎么做呢？

标签： javascripthtmlinputdynamicdefault-value

解决方案

你可以试试这个

<html>
<body>

<input type = file id = "fileUpload" accept = "image/*">
<button onclick = "displayImg()">Click to show</button>
<div id="container">
<img id="img"></div>

<script>
function displayImg() {
  let fileUpload = document.getElementById("fileUpload").value;
  //alert(fileUpload);
  let image = document.getElementById("img");
  img.src = fileUpload;

}
</script>

</body>
</html>

注意：该value属性只返回文件的名称，因此图像应与代码位于同一文件夹中。或者，如果您愿意，可以在前面添加文件的路径。

推荐阅读