javascript实现图片实时预览的两种方式

Posted 2020-11-14

一、FileReader（base64）：

1. 代码：

   <input id="file" type="file">
   <img id="img" >
   <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" >
   <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. 测试：