input[type=file] 样式美化并实现图片上传预览

我们可以通过简单的css来修改默认的样式，再用javascript中的FileReader来实现预览上传的图片。接下来我们拆分为3个部分来进行。

HTML结构

<div id="box" style="display: flex; flex-direction: column;">
        <label for="file"><i class="upload"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
            <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
          </svg></i> <input type="file" value="" id="file">上传图片</label>
          <div id="progress"></div>
    </div>

label标签是包裹了input标签，i标签是包裹了svg图标，“id=progress”是图片上传时的进度条。默认效果图如下：

CSS样式美化

input[type="file"]{
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    label{
        font-weight: bold;
        color: #6990f2;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px dashed #6990f2;
        padding: 3rem;
        flex-direction: column;
    }
    label > i{
        margin-bottom: 5px;
    }
    #box img{
       flex-direction: row;
    }

样式比较简单，input[type="file"]的样式之所以这样写，是因为有助于屏幕阅读器识别，其次也能用键盘TAB键选中，最好不要写成display:none。到这里，我们的html和css都完成了。

用FileReader实现图片上传的预览

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。可以去mdn文档深入了解。

<script>
        let filebutton=document.querySelector('#file');
        let progress=document.querySelector('#progress');
        filebutton.addEventListener('change',()={
            const file=filebutton.files[0];
            if(file){
                progress.innerHTML='';

            let fileread=new FileReader();
            fileread.onload=(e)={
                //console.log(e.target.result);
                var img1=document.createElement("img");
                img1.src=e.target.result;
                img1.width=250;
                console.log(img1.src);
                document.querySelector('#box').appendChild(img1);
            }
            fileread.onprogress=(e)={
                //上传进度条换算
                let fileload=Math.floor((e.loaded /file.size)*100);

                let progressvalue=`
                                <progress  value="${fileload}" max="100" style="width:100%"></progress>
                                `;
                progress.innerHTML=progressvalue;

            }
            fileread.readAsDataURL(file);
            }  
        })
   </script>

` `是模板字符串，如果这篇文章对你有帮助，那真是开心极了~