图片输入框自定义样式及前端回显

时间：2023-04-05 23:48:50 HTML5

前言在实际项目中，用户往往需要选择图片进行后续上传。此时使用的是Html输入，其类型设置为文件。原生输入上传图片按钮通常不能符合设计稿。我的做法是设置它的透明度为0，然后设置宽高为100%。另外，通常需要在前端回显图片，重新选择图片。这里使用了FileReader类。原生选择框：理想选择框：图片回显和重选：基础框架vue+elementUI，这里使用vue单文件组件（SFC）实现，但核心代码与选择框架相关。代码实现html部分添加照片

JS部分CSS部分.container{.img_uploaded{padding-bottom:40px;高度：自动；}.img_show{最大宽度：510px；高度：自动；}//删除图片button.del_tag{position:absolute;右：2px；顶部：2px；宽度：24px；高度：24px；游标：指针；}#img_show{位置：相对；显示：内联块；：中心;宽度：360px；高度：220px；背景：#FFFFFF；边框：1px实心#CFD8DC；边界半径：4px；d_block.add_tag{margin-top:76px;宽度：33px；高度：33px；}.upload_block.add_tip{margin-top:31px;字体大小：14px；颜色：#90A4AE；}//原始输入tag.file_input{position:relative;右：0；顶部：-162px；不透明度：0；过滤器：alpha（不透明度=0）；游标：指针；宽度：100%；高度：100%；实现三个需求：输入框样式自定义，主要是设置opacity为0；用户选中一张图片并在首页回显，主要使用FileReader()技术；添加一个删除按钮，用户可以重新选择，主要是清空输入框的files对象的value属性