不用先上传图片在回显,直接回显图片方法

在项目过程中可能会遇到一个问题,就是图片到底是上传之后回显还是怎么办,上传之后回显可能造成很多系统上面的图片垃圾所以我找到了以下方法

载体

<input type="file" width="140px" name="img" accept="image/*" οnchange="changImg(event)">
<img alt="暂无图片" id="myImg"src=""</c:if> height="100px" width="100px">


一个是上传按钮,一个是用来回显图片的img当然可以只用一个img来做也是可以的,自己改以下就行了,下面就是js了

function changImg(e){  
        for (var i = 0; i < e.target.files.length; i++) {  
            var file = e.target.files.item(i);  
            if (!(/^image\/.*$/i.test(file.type))) {  
                continue; //不是图片 就跳出这一次循环  
            }  
            //实例化FileReader API  
            var freader = new FileReader();  
            freader.readAsDataURL(file);  
            freader.onload = function(e) {  
                $("#myImg").attr("src",e.target.result);  
            };
        }
    }


在js里面写上这个方法,这个方法就是把图片直接放到img里面的一个方法,来源于网络

这样就实现了不用先上传,在回显的问题,而且不用使用别的插件,不过兼容性我没有进行过测试,对兼容性要求比较高建议先测试一下

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值