选择文件时更新图像答案

【问题标题】：Update image as file is chosen选择文件时更新图像
【发布时间】：2017-05-29 21:39:18
【问题描述】：

我希望当单击更改图片的按钮时，会打开一个输入 type=file，并且一旦选择了图像，图像 src 就会更新。我怎样才能做到这一点？我正在使用 PHP 作为服务器端语言并尝试在网页上进行操作。

【问题讨论】：

一些代码来显示你到目前为止所尝试的......？
信息不足。例如：你想在网络上做吗？什么服务器端技术。你在使用（PHP、Node.js 等）吗？还是基于 HTML/JavaScript 的桌面/移动应用程序？从您的问题中看不出任何问题。
我什么都没试过。我知道如何在单击按钮时显示输入类型=文件，但我不知道如何在选择文件后立即更新 img。
使用FileReader API和.readAsDataURL方法读取文件。然后将上述方法返回的值作为图片的src。
最简单的解决方案：stackoverflow.com/a/56777541/8240417

标签： javascript html

【解决方案1】：

您可以使用 HTML5 FileReader 来完成。您不需要为此使用 PHP 或服务器端。

查看此 JSFidlle：https://jsfiddle.net/166p3uqk/1/

您的 INPUT 文本不需要 FORM 或值。

HTML：

<input onchange=file_changed() type=file id=input>
<img id=img>

Javascript：

function file_changed(){
  var selectedFile = document.getElementById('input').files[0];
  var img = document.getElementById('img')

  var reader = new FileReader();
  reader.onload = function(){
     img.src = this.result
  }
  reader.readAsDataURL(selectedFile);
 }

更多信息：

【讨论】：

我也想把图片文件名加到服务器上。上面相同的代码怎么做？
图像文件名将被发送到您的服务器。如果满足您的要求，请接受答案

【解决方案2】：

不知道您是否需要先将图像上传到服务器但仅用于前端可以通过以下方式完成：

<input type="file" class="changeimage" id="changeimage" accept="image/*"/>
<img class="image" src="default.png" style="height:120px"/>
<script>
    document.getElementById("changeimage").addEventListener("change", function(){
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById("image").setAttribute('src', e.target.result);
        }

    });
</script>

您也可以在onchange file input change img src and change image color找到解决方案

祝你好运:)

【讨论】：