文件上传功能使用input标签实现
将input标签的type写为file,
<input type="file">

原有的样式不好看可以选择使用css将input的display置为none;
通过自定义样式标签的事件触发input的点击事件。如在react或vue中使用ref即可;
自定义样式的文件上传
<div className='content'>
<input
type="file"
name="file"
accept={accept}
style = {{display: 'none'}}
ref = { input => this.inputFile = input}
onChange={this.fileChange}
/>
<div className ='main'>
<div
className ='clickcontent'
onClick={this.clickFile}
>
<div className ='icontitlelayout'>
<InboxOutlined className ='icon' />
<span>点击上传文件</span>
</div>
</div>
<div className ='filename'>
<div className ='filenameDeleteLayout'>
<div>
{uploadFileName}
</div>
<div onClick={()=>this.deleteFile()}>
<DeleteOutlined className ='deleteicon'/>
</div>
</div>
</div>
</div>
</div>

本文介绍了如何在前端实现自定义样式的文件上传功能。通过设置input元素display为none,然后利用事件触发input的点击事件,可以在React或Vue等框架中通过ref属性轻松实现这一目标,从而提供美观的文件上传体验。

被折叠的 条评论
为什么被折叠?



