保存並顯示上傳的圖片

我有一個已經存在的圖片，我想上傳一個新圖片並替換舊圖片，但此代碼不起作用。（我有一個按鈕，其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

保存並顯示上傳的圖片

回答

相關問題