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

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

载体

<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里面的一个方法,来源于网络

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

你可以使用JavaScript来实现在单元格中上传图片回显的功能。以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>上传图片回显</title> </head> <body> <input type="file" id="upload" accept="image/*"> <table> <tr> <td id="imageCell"></td> </tr> </table> <script> // 获取上传文件的input元素 var uploadInput = document.getElementById('upload'); // 监听文件选择事件 uploadInput.addEventListener('change', function() { var file = this.files[0]; // 检查是否选择了文件 if (file) { // 创建一个FileReader对象 var reader = new FileReader(); // 监听读取完成事件 reader.onload = function(e) { // 创建一个img元素 var img = document.createElement('img'); // 设置img元素的src为读取的文件内容 img.src = e.target.result; // 将img元素添加到单元格中 var imageCell = document.getElementById('imageCell'); imageCell.innerHTML = ''; imageCell.appendChild(img); }; // 读取文件内容 reader.readAsDataURL(file); } }); </script> </body> </html> ``` 在以上代码中,我们创建了一个包含一个文件选择输入框和一个单元格的简单HTML页面。当用户选择了一个图片文件后,我们使用`FileReader`对象来读取文件内容,并将读取的内容设置为一个新创建的`img`元素的`src`属性。最后,将该`img`元素添加到单元格中,从而实现了在单元格中上传图片回显的功能。 请注意,由于安全限制,JavaScript无法直接操作本地文件系统。因此,我们使用`FileReader`对象来读取文件内容,并通过将读取的内容设置为`img`元素的`src`属性来显示图片。这样可以实现在浏览器中上传和回显图片
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值