JavaScript FileReader: 预览上传图像

该代码中有一个拼写错误。在reader.readAsDateURL(file)这一行中，应该是reader.readAsDataURL(file)。

正确的代码应该是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>WebCat</title>
    <style>
      #preview{
        max-width:80%;
      }
    </style>
  </head>
  <body>    
    <input type="file" />
    <img src="" id="preview" alt=""/>
    <script>
      var inp = document.querySelector("input");
      inp.onchange = function (){
        var file = inp.files[0];
        var reader = new FileReader();
        reader.onload = (e) =>{
          preview.src = e.target.result;
        }
        reader.readAsDataURL(file);
      }
    </script>
  </body>
</html>

这样，当选择文件后，文件的预览图像将会显示在页面上。