javascript實現圖片實時預覽的兩種方式

一、FileReader（base64）：

1. 代碼：

   <input id="file" type="file">
   <img id="img" alt="">
   <script>
   var file = document.getElementById('file')
   var img = document.getElementById('img')
   file.addEventListener('change',function(){
       var obj = file.files[0]
       var reader = new FileReader();
       reader.readAsDataURL(obj);
       reader.onloadend = function() {
           img.setAttribute('src',reader.result);
       }
   })
   </script>

2. 測試：
   

   二、window.URL.createObjectURL（blob）：

3. 代碼：

   <input id="file" type="file">
   <img id="img" alt="">
   <script>
   var file = document.getElementById('file')
   var img = document.getElementById('img')
   file.addEventListener('change',function(){
       var obj = file.files[0]
       var src = window.URL.createObjectURL(obj)
       img.setAttribute('src',src);
   })
   </script>

4. 測試：