<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="width: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>


这是效果图。

vue项目 多文件上传并显示在页面上的更多相关文章

  1. VUE项目中文件上传兼容IE9

    项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...

  2. struts中用kindeditor实现的图片上传并且显示在页面上

    做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...

  3. 【原创】用JAVA实现大文件上传及显示进度信息

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...

  4. vue之element-ui文件上传

    vue之element-ui文件上传 文件上传需求 ​ 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...

  5. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  6. SpringBoot项目实现文件上传和邮件发送

    前言 本篇文章主要介绍的是SpringBoot项目实现文件上传和邮件发送的功能. SpringBoot 文件上传 说明:如果想直接获取工程那么可以直接跳到底部,通过链接下载工程代码. 开发准备 环境要 ...

  7. silverlight漂亮的文件上传进度显示原理及示例

    silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园  2009/11/27 13:37:11 阅读 1219  次 概述:在网站根目录web.config里配 ...

  8. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  9. 文件上传下载显示进度(vue)

    编写了一个vue组件,可以实时显示文件上传和下载时候的进度 <template> <div v-show="circleProgress_wrapper_panel_sta ...

随机推荐

  1. Linux shell 误操作

    shell脚本在日常运维中是必不可少会应用到,下面是自己亲身经历过的一件事.会了定期清除日志,编写了一个shell脚本,内容如下: [root@centos- tmp]# more remote_lo ...

  2. Flutter-Radio單選框

    Container( child: Radio<String>( value: "男", activeColor: Colors.red,//激活時的顏色 groupV ...

  3. Python---tkinter---贪吃蛇(能用的)

    项目分析:构成:蛇 Snake食物 Food世界 World蛇和食物属于整个世界  class World:      self.snake      self.food上面代码不太友好我们用另外一个 ...

  4. 多个excel文件内容合并到一个excel文件的多个sheet的小程序

    # -*- coding:utf-8 -*- import xlrd, xlsxwriter # 待合并excelallxls = ["D:\\excelcs\\***.xlsx" ...

  5. 【leetcode】540. Single Element in a Sorted Array

    题目如下: 解题思路:题目要求时间复杂度是O(logN),可以尝试使用二分查找法.首先数组是有序的,而且仅有一个元素出现一次,其余均为两次.我们可以先找到数组最中间的元素,记为mid.如果mid和mi ...

  6. LeetCode--152--乘积最大子序列(python)

    给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4]输出: 6解释: 子数组 [2,3] 有最大乘积 6.示例 2: 输 ...

  7. node创建项目,要ejs模板引擎,不要jade怎么办?

    创建项目时:express ejs blog,生成的是.jade文件怎么办?我想要的是ejs的呀 上述语句不仅名字不对,生成文件的格式也不是我想要的. 不妨试试:express -e blog 这下就 ...

  8. 《x86汇编语言:从实模式到保护模式 》学习笔记之:第一次编写汇编语言

    1.汇编语言源文件:first.asm mov ax,0x3f add bx,ax add cx,ax 2.用nasm编译成二进制文件:first.bin nasm -f bin first.asm ...

  9. Activiti的分配任务负责人(八)

    1分配任务负责人 1.1 固定分配 在进行业务流程建模时指定固定的任务负责人 在 properties 视图中,填写 Assignee 项为任务负责人.注意事项由于固定分配方式,任务只管一步一步执行任 ...

  10. Android - Gradle架构中使用的“.so”库

    Android使用Gradle架构的Android应用,需要对.so库做特殊的处理,因为会找不到,就会导致编译正确,使用错误:常见的使用情况是根据不同的cpu,有不同的库,包括:armeabi,mip ...