Как получить значение input type = file и отобразить его на динамически создаваемом изображении? - PullRequest
Новая
       34

Как получить значение input type = file и отобразить его на динамически создаваемом изображении?

0 голосов
/ 16 апреля 2020

У меня есть следующий код: 

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>

Я хочу, чтобы пользователь мог ввести файл в поле ввода файла и поместить его в источник динамически создаваемого изображения при нажатии кнопки , Как мне это сделать?

Ответы [ 3 ]

0 голосов
/ 16 апреля 2020

Вы можете попробовать это 

<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 возвращает только имя файла, поэтому изображение должно находиться в той же папке, что и код . Или, если хотите, вы можете добавить путь к файлу раньше.

0 голосов
/ 16 апреля 2020

пожалуйста, используйте следующий код: 

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>
0 голосов
/ 16 апреля 2020

Вот решение: 

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