使用HTML标签实现Upload文件上传组件

vue经验 专栏收录该内容
5 篇文章 0 订阅

使用HTML标签实现Upload文件上传组件

如何构建Upload文件上传组件

在前端开发中总是免不了要用到 Upload 组件,之前在开发Vue应用时使用element-ui中的Upload组件,发现在IE浏览器中失效,于是毫无计策之下选择用HTML原始标签"瞒天过海"。

效果图展示

在这里插入图片描述

源码展示

使用input type=‘file’ 实现Upload功能,在通过CSS修饰改善组件样式。

<div class="content-container">
     <div tabindex="0" class="upload-container">
         <a href="javascript:;" class="btn btn-secondary">
         {{$filter("Upload")}}
             <input ref="file" type="file" name="file" class="upload-input" @change="handleChange">
         </a>
     </div>
     
     <div class="file-name-div">
         <span v-if="!file" class="no-file">{{$filter("noFileSelected")}}</span>
         <span v-else class="file-name">{{file.name}}</span>
     </div>


     <button class="btn-primary" @click.prevent="submit">{{$filter("Submit")}}</button>
     <div class="upload-div">
         <span>{{$filter("pleaseClick")}}</span>
         <a target="_blank" href="static/excel/Manual_Adjust_Template.xlsx">{{$t("here")}}</a>
         <span>{{$filter("downLoadTemplate")}}</span>
     </div>
 </div>
        .content-container{
           display:flex;
           flex-direction:column;
           align-items:center;
           .file-name-div{
               margin:10px 0;
               .no-file,.file-name{
                   margin:10px 0 20px;
               }
           }


           .upload-div{
               margin-top:10px;
           }
       }
       .upload-container{
           display: flex;
           position: inherit;
           .btn-secondary {
               position: relative;
               .upload-input{
                   opacity: 0;
                   position: absolute;
                   overflow: hidden;
                   top: 0;
                   right: 0;
                   width: 100%;
                   height:100%;
               }
           }        
       }
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值