label+input自定义文件上传功能

小男哥、

于 2020-10-11 19:49:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文介绍了如何实现一个简单的文件上传和已选文件删除功能。通过使用label标签配合隐藏的input[type='file']元素，点击label内容触发文件选择。当需要删除已选文件时，只需将input值设为null。该方法适用于需要简洁上传功能的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：有些时候只需要在点击一个按钮、一段文字或者一个小图标就能实现简单的文件上传的功能，而使用封装组件中的上传模块需要做很多方面的修改，使用起来有些得不偿失，这个时候自己动手做一个简单的上传功能就是一个非常明智的选择了。下面是本次功能的简单实现过程：

思路：使用label标签的标记input（type为"file"），同时将input进行隐藏；点击label中的内容时触发input的文件选择，当需要删除已选择的文件时，在将input值改成null即可，实现如下：

html代码：

  <label for="inputFile" class="uploadFileClass">
  	选择文件
  </label>
  <input type="file" id="inputFile" style="display: none;" accept=".csv" @chan