点击图片，触发文件上传效果

最新推荐文章于 2024-01-23 16:42:20 发布

uniquemei

最新推荐文章于 2024-01-23 16:42:20 发布

阅读量456

点赞数

分类专栏： H5混合开发 Vue.js 2学习笔记文章标签：前端 html javascript

本文链接：https://blog.csdn.net/uniquemei/article/details/125411751

版权

H5混合开发同时被 2 个专栏收录

32 篇文章 3 订阅

订阅专栏

Vue.js 2学习笔记

12 篇文章 0 订阅

订阅专栏

点击图片，触发上传文件的效果，上效果图
在这里插入图片描述
思路：

使用input标签，设置type=”file“，将input样式透明度设置为0，背景设置为图片即可。

上代码

  <div class="imageFileInput">
   <input
    class="fileInput"
    type="file"
   @change="onFileChanged"
  />
 </div>
 <div class="shuJuName">数据上传</div>


<style lang="less" scoped>
.imageFileInput {
  width: 40px;
  height: 40px;
  background: url(../../../src/assets/imgs/shangchuan.png);
  background-size: cover;//设置图片根据盒子大小自适应展示
}
.shuJuName {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  margin-top: 4px;
}
.fileInput {
  height: 100%;
  width: 40px;
  opacity: 0;//设置透明度为0
}
</style>