时间戳

首页 > 解决方案 > 如何显示在新 HTML 页面中选择的文件 (jpeg/png) 的预览？

javascript - 如何显示在新 HTML 页面中选择的文件 (jpeg/png) 的预览？

问题描述

我要做的是将选定的文件对象从当前的 html 页面（current.html）传递到另一个 html 页面（preview.html），并在那里显示所选图像的预览。

当前.html：


Upload image: <input type="file" accept=".jpeg , .png" id="img"><br>
<button id="button" onclick = "submit()" >Register</button>
   
<script type="text/javascript">
   
   var file=document.getElementById("img").files[0];
   document.cookie="Image =" + file + ";" + "path=/";
   window.location.href="preview.html";
   
</script>

预览.html

 Image: <img src="" alt="" id="image"><br>
    
 <script type="text/javascript">
    
    var arr=document.cookie.split(';');

    for(var i = 0; i < arr.length; i++){
         
       var c = arr[i].split('=');
       if(c[0].trim() == 'Image'){
          var reader = new FileReader();
          reader.onload = function() {
             document.getElementById("image").src = reader.result;
          }
          if (c[1]) { reader.readAsDataURL(c[1]); }
       }
    }
</script>

但是preview.html中没有显示图像。相反，我在控制台选项卡中不断收到错误：

uncaught typeerror: failed to execute 'readasdataurl' on 'filereader': parameter 1 is not of type 'blob'.

我怎样才能解决这个问题？

标签： javascripthtmlfile-upload

解决方案

在 cookie 中设置 FileObject 将不起作用。尝试将其转换为 base64 字符串并执行类似的操作。

<input type="file" accept=".jpeg , .png" id="img" /><br />

<button id="button" onclick="submit()">Register</button>

<script type="text/javascript">
  var submit = () => {
    var file = document.getElementById("img").files[0];
    const reader = new FileReader();
    reader.addEventListener("load", (event) => {
      localStorage.setItem("Image", event.target.result);
      window.location.href = "preview.html";
    });
    reader.readAsDataURL(file);
  };
</script>

预览.html

Image: <img src="" alt="" id="image" /><br />

<script type="text/javascript">
  const image = localStorage.getItem("Image");
  document.getElementById("image").src = image;
</script>

推荐阅读