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

Question

我有以下代码：

 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>

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

Answer 1

你可以试试这个

<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属性只返回文件的名称，因此图像应该与代码位于同一文件夹中。或者如果您愿意，您可以在前面添加文件的路径。

Answer 2

请使用以下代码：

 var uploadedFileURL; function handleFile() { var fileUploadControl = document.getElementById('fileUpload'); var file = fileUploadControl.files[0]; if (file) { var reader = new FileReader(); reader.onload = function() { uploadedFileURL = reader.result; }; reader.readAsDataURL(file); } } function displayImg() { var fileUpload = document.getElementById("fileUpload").value; var container = document.getElementById("container"); container.innerHTML = `<img src="${uploadedFileURL}">`; }

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

Answer 3

这是一个解决方案：

<input type="file" id="fileUpload" accept="image/*">
<button onclick="displayImg()">Click to show</button>
<div id="container">
  <img id="img"></img>
</div>
<script>
  let displayImg = () => {
  let reader = new FileReader();
  let input = document.getElementById('fileUpload');
    reader.onload = () => {
      let img = document.getElementById('img');
      img.src = reader.result;
    };
    reader.readAsDataURL(input.files[0]);
  };
</script>

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

问题描述

3 个解决方案

解决方案1
0 已采纳 2020-04-16 12:49:54

解决方案2
0 2020-04-16 13:05:57

解决方案3
-1 2020-04-16 12:46:15

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

问题描述

3 个解决方案

解决方案1 0 已采纳 2020-04-16 12:49:54

解决方案2 0 2020-04-16 13:05:57

解决方案3 -1 2020-04-16 12:46:15

解决方案1
0 已采纳 2020-04-16 12:49:54

解决方案2
0 2020-04-16 13:05:57

解决方案3
-1 2020-04-16 12:46:15