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

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

这是一个解决方案：

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

Answer 2

你可以试试这个

<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 属性仅 returns 文件名，因此图像应位于与文件相同的文件夹中code.Or 如果你想的话，你可以在前面添加文件的路径。

Answer 3

请使用以下代码：

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>

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

How to get value of input type = file and display it on a dynamically created image?

html

javascript

input

dynamic

default-value