zoukankan      html  css  js  c++  java
  • vue项目 多文件上传并显示在页面上

    <template>
      <
    label for="file" class=" btn btn-default" style="border:1px solid red">多文件上传</label>   <input type="file" style="display:none;" id="file" multiple @change="file()" name="multipartFiles">   <table style="500px;margin:0 auto;" id="wenjian">     <tr style="" id="col">       <th class="name">文件名</th>       <th class="size">大小</th>       <th class="zhuangtai">状态</th>       <th>操作</th>     </tr>     <tr :class="isactive?aaa:''" v-for="(dd,index) in wenjian" :key="index" id="tr">       <td>{{dd.name}}</td>       <td>{{(dd.size/1024).toFixed(1)}}kb</td>       <td>等待上传</td>       <td><button @click="del(index)">删除</button></td>     </tr>   </table>
    </template>

    date(){
      return{
        wenjian:[],
        isactive:true,
        aaa:'aaaclass'
      }
    }
    methods:{
     file(){
          var that = this;
          for(var ff=0;ff<$("#file")[0].files.length;ff++){
            that.wenjian.push($("#file")[0].files[ff])
          }
          that.isactive = false;
          //console.log($("#file")[0].files)
          //console.log(that.wenjian)      
        },
    del(index){
          //console.log(111)
          var that = this;
          //console.log(that.wenjian)
          that.wenjian.splice(index,1)
        },
    }
    
    

    <style>.aaaclass{display:none;}</style>

    
    

    这是效果图。

  • 相关阅读:
    C#预编译指令
    net 数据库连接详解 相当经典啊
    C#中参数前缀ref、out的使用
    C#中HTML字符转换函数
    SQL语句【TSQL汇总】
    64位XP操作系统下访问Access数据库的问题及解决
    ASP.NET Cache的一些总结
    xml 总结
    POJ 1011 Sticks
    POJ 3278 Catch That Cow
  • 原文地址:https://www.cnblogs.com/teoh/p/11550787.html
Copyright © 2011-2022 走看看