保存和显示上传的图像

Question

我有一张已经存在的图片，我想上传一张新图片并替换旧图片，但此代码不起作用。 （我有一个按钮，其 onclick 属性是 photoSave()。）有人能说出这段 Javascript 代码有什么问题并写一个可能的解决方案吗？

这是代码的重要部分：

<div class="row">
      <div class="col-md-12">
        <div class="profilePic" id="profilePic">
          <img src="prof.jpg" id="pictureToShow" />
        </div>
      </div>
    </div>

    <br>

    <div class="row">
      <div class="col-md-12">
        <div id="photoButton">
          <label class="btn btn-default btn-file" style="width:220px" onclick="photoChange()">
            Profilkép megváltoztatása <input type="file" accept="image/*" style="display: none" id="newPhoto">
          </label>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      function photoChange() {
        document.getElementById("photoButton").innerHTML = '<button type="button" style="width:110px" class="btn btn-success btn-s" onclick="photoSave()">Mentés</button><button type="button" style="width:110px" class="btn btn-danger btn-s" onclick="photoSave()">Mégse</button>'
      }

      function photoSave() {
        document.getElementById("photoButton").innerHTML = '<label class="btn btn-default btn-file" style="width:220px" onclick="photoChange()">Profilkép megváltoztatása<input type="file" accept="image/*" style="display: none"></label>'

        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            $('#pictureToShow').attr('src', e.target.result);
          }

          reader.readAsDataURL(input.files[0]);
        }
      }
    </script>

Answer 1

当您通过input type="file" 上传文件时，该文件尚未保存在您的服务器中。

两种解决方案：

1. 所以你需要把这个文件放在你网站上的资源库中 服务器。
2. 或者您可以预览图像，请参阅 Preview an image before it is uploaded

在你的函数中添加以下js：

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#pictureToShow').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }

另外，你的图片没有ID属性，所以需要把<img src="prof.jpg" />改成<img src="prof.jpg" id="pictureToShow" />。