input 图片上传

一直不明白input上传的过程原理。

  <input type="file" onchange="go(this)">
    <img id="iimg"  alt="">
    <script>
        function go(s){
            var file=s.files[0];
            var render=new FileReader();
            render.readAsDataURL(file);//转为base64格式
            render.onload=function(ee){
                console.log(ee)
                document.getElementById('iimg').src=ee.target.result
            }
        }
    </script>

1 file表单上传后能拿到一个files数组;
2 拿到files[0],通过filereader来实现预览
3 files[0]能读到文件名;reader.onload函数能读到图片资源值;
然后做其他处理
遇见问题,留作参考

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您想实现上图片并且可以删除,可以通过以下步骤来实现: 1. 在前端页面,添加一个文件上input标签,例如: ``` <input type="file" id="image-uploader"> ``` 2. 在上图片之后,将图片的地址保存到一个数组中,同时在页面上显示图片。例如: ``` let images = []; const handleImageUpload = (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = () => { const image = reader.result; images.push(image); displayImages(images); } reader.readAsDataURL(file); } const displayImages = (images) => { const container = document.getElementById('image-container'); container.innerHTML = ''; images.forEach((image, index) => { const img = document.createElement('img'); img.src = image; img.classList.add('uploaded-image'); const deleteBtn = document.createElement('button'); deleteBtn.innerText = 'Delete'; deleteBtn.addEventListener('click', () => deleteImage(index)); const imageWrapper = document.createElement('div'); imageWrapper.classList.add('uploaded-image-wrapper'); imageWrapper.appendChild(img); imageWrapper.appendChild(deleteBtn); container.appendChild(imageWrapper); }); } const deleteImage = (index) => { images.splice(index, 1); displayImages(images); } document.getElementById('image-uploader').addEventListener('change', handleImageUpload); ``` 3. 在页面上添加一个图片容器,用于显示上图片。例如: ``` <div id="image-container"></div> ``` 4. 在每张图片旁边添加一个"删除"按钮,点击按钮可以删除对应的图片。例如: ``` const deleteBtn = document.createElement('button'); deleteBtn.innerText = 'Delete'; deleteBtn.addEventListener('click', () => deleteImage(index)); ``` 5. 当用户提交表单时,将上图片地址提交到后端进行保存。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值