zoukankan      html  css  js  c++  java
  • 文件上传优化

    文件上传

    文件上传的优化主要是从按钮的样式和操作逻辑入手的。

    需求是这样的:

         input框  当type="file" 它的文案及弹框样式都无法修改,

         再查阅百家资料,高人相助后,用这个方法解决了这个问题。

         其实网上也有很多,只是当时在vue文件中怎么去尝试这个,没有思路......

    解决方法如下:

        额外设置两个的按钮,分别触发文件上传和文件夹上传事件,并把input文件上传按钮不显示在页面中

        HTML部分:

     1  <div class="menu">
     2     <span class="menu-title" @click="downFile(1)">上传文件</span>
     3     <input v-show="false" id="uploadfile" style="display:block" type="file" name="files[]" ref="sdx1" multiple @change="getfile($event)" />
    13  </div>
    14  <div class="menu">
    16     <span class="menu-title" @click="downFile(2)">上传文件夹</span>
    17     <input v-show="false" id="uploadfiles" style="display:block" type="file" name="files[]" webkitdirectory ref="sdx2" multiple @change="getfile($event)"/>
    28  </div>

         JS部分:

    1   downFile(type) {
    2       if (type == "1") {
    3         this.$refs["sdx1"].click();
    4       } else {
    5         this.$refs["sdx2"].click();
    6      }
    7   },

       这种写法,本质上是在中间函数运用了ref以获取文档元素,并调用其click事件,笔者当初这种方法忽略的原因主要是两点:

       1、ref知识点不够敏感

       2、认为文本框的change事件是不可触发的事件,岂料,调用click元素就可以,真是啼笑皆非。

       不过也算小小收获,便记录下,与诸君分享。

    未完,待续......
  • 相关阅读:
    VUE初始化
    Flask基础
    算法面试题整理
    python基础数据类型整理
    Cookies 和 Session
    Django 第一天
    初入社会八个月总结
    CSS常用选择器
    分享一点漂亮的扁平化网页
    几个漂亮的网页设计
  • 原文地址:https://www.cnblogs.com/zhishiyv/p/13679863.html
Copyright © 2011-2022 走看看