paioll 2022-05-16 16:14 采纳率: 0%
浏览 67
已结题

html怎么引用另一个html中用户上传的图片

//读取图片 search.html
    <body>
        <br>
        <div style="border:5px solid #000000"></div>
        <br><br>
        <div id="a">
        <span>
            <h2>图 像 检 索 工 具</h2>    
        </span>
        </div>
            <div style="display: block;" >
                <img id="preview" width="-1" height="-1" style="max-width: 256px; display: block; max-height: 256px; margin: 0 auto;">
            </div>
            <form id="form" enctype="multipart/form-data" 
             onsubmit="return check()";>
                <input type="file" accept="image/*" name="file" id="file"/>
            </form>
             <div style="text-align: center;" >
               <button id="b" onclick="location.href='result.html'">开始检索</button>                     
             </div>
            <script>
                var fileDom = document.getElementById("file");
                var previewDom = document.getElementById("preview");
                fileDom.addEventListener("change", e=>{
                    var file = fileDom.files[0];
                    // check if input contains a valid image file
                    if (!file || file.type.indexOf("image/") < 0) {
                        fileDom.value = "";
                        previewDom.src = "";
                        return;
                    }
                    // use FileReader to load image and show preview of the image
                    var fileReader = new FileReader();
                    fileReader.onload = e=>{
                        previewDom.src = e.target.result;
                    };
                    fileReader.readAsDataURL(file);
                });
                var formDom = document.getElementById("form");
                function check() {
                    var file = fileDom.files[0];
                    // check if input contains a valid image file
                    if (!file || file.type.indexOf("image/") < 0) {
                        return false;
                    }

                }
            </script>
        </body>
//引用图片 result.html
    <body>
        <p>所 选 图 片</p>

    </body>

请问如何在第二个html文件中引用第一个html中读取的图片

  • 写回答

6条回答 默认 最新

  • 一只成序源 2022-05-16 16:36
    关注

    把图片在第一个页面中存储在浏览器中,然后第二页面去获取。
    把image转成base64保存在localStrong中,页面二中取出base64然后渲染即可

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 5月17日
  • 修改了问题 5月16日
  • 创建了问题 5月16日

悬赏问题

  • ¥15 luckysheet
  • ¥25 关于##爬虫##的问题,如何解决?:
  • ¥15 ZABBIX6.0L连接数据库报错,如何解决?(操作系统-centos)
  • ¥15 找一位技术过硬的游戏pj程序员
  • ¥15 matlab生成电测深三层曲线模型代码
  • ¥50 随机森林与房贷信用风险模型
  • ¥50 buildozer打包kivy app失败
  • ¥30 在vs2022里运行python代码
  • ¥15 不同尺寸货物如何寻找合适的包装箱型谱
  • ¥15 求解 yolo算法问题