JS圖片預覽

時間 2019-11-17

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>圖片預覽</title>
</head>

<body>
  <input type="file" class="file">
  <div id="preview"></div>
  <script src="js/jquery.js"></script>
  <script>
  var file = new FileReader();
  file.onload = function(e) {
    document.getElementById('preview').innerHTML = '<img src="' + e.target.result + '">'
  }
  $('.file').on('change', function() {
    file.readAsDataURL(this.files[0]);
  });
  </script>
</body>

</html>

當文件選擇框發生改變時獲取到File對象（this.files[0]），使用readAsDateURL()函數，觸發FileReader對象onload事件，將圖片數據顯示到頁面上。html

FileReader jquery

對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。異步

readAsDataURL()

開始讀取指定的Blob對象或File對象中的內容. 當讀取操做完成時,readyState屬性的值會成爲DONE,若是設置了onloadend事件處理程序,則調用之.同時,result屬性中將包含一個data:URL格式的字符串以表示所讀取文件的內容.函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。