js实现上传图片立即回显

女爷i 2022-09-30 10:59 252阅读 0赞

<script type="text/javascript"> //门头照片 function newFile() { var windowURL = window.URL || window.webkitURL; var loadImg = windowURL.createObjectURL(document.getElementById('photoPic').files[0]); document.getElementById('newImg').setAttribute('src',loadImg); } //营业执照复印件 function oldFile() { var windowURL = window.URL || window.webkitURL; var loadImg = windowURL.createObjectURL(document.getElementById('licensePic').files[0]); document.getElementById('oldImg').setAttribute('src',loadImg); } </script>

<div class='form-div'>
                        <label class="form-label">门头照片<b>*</b></label>
                        <div class="up-pic">
                            <img src="" id="newImg" > 
                            <span>+</span>
                            <input type="file" id="photoPic" onchange="newFile()" name="photoPic" multiple="true" class="form-input file-pic"/>
                        </div>
                    </div>
                     <div class='form-div'>
                        <label class="form-label">营业执照复印件<b>*</b></label>
                        <div class="up-pic">
                            <img src="" id="oldImg" > 
                            <span>+</span>
                            <input type="file" id="licensePic" onchange="oldFile()" name="licensePic" multiple="true" class="form-input file-pic"/>
                        </div>
                    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue+SpringBoot实现图片上传和回显

[在这里插入图片描述][20190828150901694.png] > 1. 点击Vue图标，选择电脑中图片，选中后把图片替换为选中图片 > 2. 点击上传，通过...

短命女/ 2024年04月17日 16:13/ 0 赞/ 112 阅读

相关 Vue图片回显标签教程 - 实现图片上传和回显功能

系列文章目录 -------------------- 文章目录系列文章目录前言一、准备工作二、HTML模板三、HTML模

Love The Way You Lie/ 2023年10月14日 14:31/ 0 赞/ 88 阅读

相关 SpringBoot图片上传并回显

文章目录 1. Controller 2. 创建MyWebMvcConfigurer配置资源映射路径 3. 验证 1. Controller

╰+攻爆jí腚メ/ 2023年07月08日 06:59/ 0 赞/ 153 阅读

相关 springboot项目图片上传，不能立即回显问题（已解决）

问题如下 ![在这里插入图片描述][20191115150024289.png] 当上传一个图片，是这样显示的。我的解决方案 1.将springboot配置成

不念不忘少年蓝@/ 2023年06月13日 09:29/ 0 赞/ 142 阅读

相关 elementUI图片上传，并实现图片回显（正式上传服务器之前就能回显）

效果图： ![在这里插入图片描述][20210304160205579.png] ![在这里插入图片描述][20210304160220708.png] 实现方法

电玩女神/ 2022年11月05日 06:30/ 0 赞/ 1486 阅读

相关 js实现上传图片立即回显

<script type="text/javascript"> //门头照片 function newFile() { var windowURL = window.U

女爷i/ 2022年09月30日 10:59/ 0 赞/ 253 阅读

相关图片上传服务器-回显

jar包 ![jar包][jar] 配置文件  <bean id="multipartResolver" cla

àì夳堔傛蜴生んèń/ 2022年06月06日 08:46/ 0 赞/ 328 阅读

相关跨服务器上传-图片服务器-图片回显-列表回显

jar包 ![jar包][jar] 配置文件  <bean id="multipartResolver" cla

心已赠人/ 2022年06月06日 08:46/ 0 赞/ 378 阅读

相关 HTML上传图片的回显

document.getElementById("showImg").src = window.URL.createObjectURL(personsFile.file

- 日理万妓/ 2022年05月25日 12:55/ 0 赞/ 527 阅读

相关先回显图片再上传

平时开发时可能会遇到上传图片问题，但如果是上传图片，多数是先进行上传然后才能回显，今天给大家介绍一个简单的上传前先对图片进行回显的方式，仅用一小部分js代码即可实现 js

￡神魔★判官ぃ/ 2021年12月21日 07:23/ 0 赞/ 374 阅读