码迷,mamicode.com
首页 > Web开发 > 详细

vue 上传文件 并以表格形式显示在页面上

时间:2019-09-12 16:45:51      阅读:528      评论:0      收藏:0      [点我收藏+]

标签:multiple   多文件   eth   one   files   index   fixed   引入   上传   

先上代码

<label for="file" class="btn">多文件上传</label>
<input type="file" style="display:none;" id="file" multiple @change="file()">

这是上传文件的按钮

<table>
    <tr>
        <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">
        <td>{{dd.name}}</td>
        <td>{{(dd.size/1024).toFixed(1)}}kb</td>
        <td>等待上传</td>
        <td><button>删除</button></td>
    </tr>             
</table>    

这是显示在页面上的表格

 data () {
    return {
      wenjian:[],
      isactive:true,
      aaa:‘aaaclass‘
    }
  }
 methods:{
    file(){
      //console.log($("#file")[0].files[0])
      var that = this;
      that.wenjian = $("#file")[0].files;
      that.isactive = false;
    }
}
<style>
  .aaaclass{
      display:none;
      }
</style>

试一试吧!

这些代码的前提是在vue中引入jquery。

vue 上传文件 并以表格形式显示在页面上

标签:multiple   多文件   eth   one   files   index   fixed   引入   上传   

原文地址:https://www.cnblogs.com/teoh/p/11512449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!