使用 JavaScript 实现文件预览功能 - WebCat - 常规

<!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>
    function BASE64(file){
      return new Promise((resolve, reject) => {
        var reader = new FileReader();
        reader.onload = (e) =>{
          resolve(e.target.result);
        }
        reader.onerror = (e) => {
          reject(e);
        }
        reader.readAsDataURL(file);
      });
    }
<pre><code>var inp = document.querySelector(&quot;input&quot;);
inp.onchange = async function(){
  try {
    preview.src = await BASE64(inp.files[0]);
  } catch (error) {
    console.error(error);
  }
}
&lt;/script&gt;
</code></pre>
  </body>
</html>