Question

我有一个img src =“example.jpg”，我还有一个输入类型=“文件”。我想知道是否有办法使输入type =“file”将img更改为用户从他/她的计算机中选择的任何内容。

Answer 1

以下是您要问的基本示例，尽管它不处理持久性，登录会话或其他任何您在生产环境中工作所需的内容。

document.addEventListener('DOMContentLoaded', init);
function init() {
  var input = document.querySelector('input');
  var reader = new FileReader();

  // When the FileReader "load" event fires, update the image.
  reader.onload = function (e) {
      document.getElementById("image").src = e.target.result;
  };

  // Listen for when the input changes.
  input.addEventListener('change', onInputChange)
  function onInputChange(e) {
    reader.readAsDataURL(this.files[0]);
  }
}

<img src="//placehold.it/200x200" id="image" height="200">
<input type="file">

旁注：欢迎使用StackOverflow。因为你没有包括你尝试过的任何东西，所以你得到了投票。 SO是一个获取现有代码帮助的地方，不是为了研究或为您编写代码。

如何让用户更改html中的图片？

1 个答案: