保存并显示上传的图片

我有一个已经存在的图片，我想上传一个新图片并替换旧图片，但此代码不起作用。（我有一个按钮，其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>

来源

2016-08-17 user6725906

文件输入没有'src'，你必须使用FileReader才能查看选定的图像：http://stackoverflow.com/questions/19005678/how-to-upload-an-image-with-jquery -client-side-and-add-it-to-a-div – yuriy636

按钮的onclick属性是photoChange（）而不是photoSave（）。 – Max

你可以试试这个方法http://stackoverflow.com/questions/4094012/how-to-upload-preview-image-before-upload-through-javascript http://stackoverflow.com/questions/1077041/refresh-image在一个新的在同一个网址 –

当你上传通过input type="file"一个文件，该文件还没有保存在你的服务器。

两个解决方案：

所以，你需要把这个文件在你的资源回购您的Web 服务器上。
或者你可以预览图像，看到 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" /> for <img src="prof.jpg" id="pictureToShow" />。

来源

2016-08-17 11:09:50 Nico

对不起，我是初学者，我不太明白你的意思。你可以添加一个示例代码吗？但是我还没有网络服务器，代码就在我的电脑上。 – user6725906

查看我上面通过的链接。我在我的回复中添加了这个例子。 – Nico

好的，谢谢！ – user6725906

保存并显示上传的图片

回答

相关问题