js實現圖片上傳實時顯示

本文轉載自查看原文 2017-12-01 14:13 5266 javascript

在開發的時候經常遇到這樣的需求，用戶在上傳圖片的時候，想要看到自己上傳的圖片是否正確，這時候需要把用戶上傳的圖片及時顯示出來，然后等他點擊上傳的時候，程序再執行上傳到服務器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" name="file" onchange="showPreview(this)" />
    <img id="portrait" src="" style="display:none;" />
</body>
</html>
<script type="text/javascript">
    function showPreview(source) {
      var file = source.files[0];
      if(window.FileReader) {
          var fr = new FileReader();
          console.log(fr);
          var portrait = document.getElementById('portrait');
          fr.onloadend = function(e) {
            portrait.src = e.target.result;
          };
          fr.readAsDataURL(file);
          portrait.style.display = 'block';
      }
    }
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS實現上傳圖片實時預覽 jsp上傳圖片實時顯示 js 實現圖片實時預覽 Js實現input上傳圖片並顯示縮略圖使用Uploadify實現上傳圖片生成縮略圖例子,實時顯示進度條 js圖片壓縮和上傳並顯示 js 實現圖片上傳使用Uploadify實現上傳圖片生成縮略圖例子,實時顯示進度條基於Jquery插件Uploadify實現實時顯示進度條上傳圖片 JS 實現上傳圖片