首页 > 其他分享 >实现简单的csv文件上传和bootstrap表格的下载

实现简单的csv文件上传和bootstrap表格的下载

时间:2023-01-05 19:35:02浏览次数:49  
标签:function 文件 bootstrap var table csv 上传

一、写一个简单的页面并发送文件

  引入bootstrap.js,jQuery.js等,具体的网页就不细写了,很简单。

  加入input框,button控件,进度条。如下:

 <li class="list-group-item" id="input-file-group">
    <div class="input-group mb-3">
    <!-- 上传.csv文件 -->
        <input type="file" class="form-control" id="inputGroupFile" aria-describedby="inputGroupFileAddon" aria-label="Upload" accept=".csv">
        <button class="btn btn-default btn-outline-secondary" type="button" id="inputGroupFileAddon" onclick="submitUpload()">确认提交</button>
        <br>
        <!-- 进度条 -->
        <div class="progress" style="width: 500px; margin: 15px 10px">
            <div class="progress-bar progress-bar-striped active" id="progress-bar"></div>
        </div>
    </div>
</li>

  编写点击事件

    获取文件

 var orderFile =document.querySelector('#inputGroupFile').files;

    创建formdata对象并添加文件

var fd=new FormData();
fd.append('avatar',orderFile[0]);

    使用Ajax发送文件并实现进度条

$.ajax({
            type: "POST",
            url: "",
            data: fd,
            processData: false,
            contentType: false,
            error: function (data) {
                setTimeout(function(){
                    alert("文件上传失败");
                },50);     
            },
            success: function (data) {
                setTimeout(function(){
                    alert("文件上传成功");
                    },1000);
            },
            xhr: function () {
                myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {  
                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                }
                return myXhr; 
            }
});

function progressHandlingFunction(event) {     var loaded = Math.floor(100 * (event.loaded / event.total));      $("#progress-bar").html(loaded + "%").css("width", loaded + "%"); }

  实现的效果如下所示:

 

 

 

 

 

 二、Multer中间件解析上传文件

  先引入multer

const multer = require('multer');

  

router.post('', multer().single('avatar'), (req, res) => {

    let { buffer, mimetype } = req.file;
    var tempString = buffer.toString('utf8');
});

  这里,buffer的内容就是十六进制的文件信息,mimetype是文件格式text/csv

  转换成utf-8编码后就可以使用了。

 

 

 三、bootstrap表格的下载

  提一下bootstrap表格的实现:

  引入bootstrap-table插件

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script>

  版本要对应上

  使用的代码: 

$('#searchResultTable').bootstrapTable({
    method:'get',
    url:'',
    pageNumber : 1, 
    pagination : true,
    sidePagination : 'client',
    pageSize : 4,
    pageList : [ 5, 10, 20, 30 ],
    queryParams : function(params) {
    var a=111;
    };
  
columns: [{         title: '订单编号',         field: 'orderID',
    },{         title: '订单类型',         field: 'orderType',     }]
});

  这里 router要发送一个符合上述行的json数据 

  建议用如下方式

res.json(aaa);

  如下所示:

[
  {
    orderID: '28435647',
    orderType: '0'
  },
  {
    orderID: '50404380',
    orderType: '0'
  }
]

  效果如下:

  现在,使用bootstrap-table-export插件实现bootstrap的导出

  加入依赖(按顺序),和上面有些重复的

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>

  在之前的bootstrap表格的js代码中加入如下一行:

showExport:true,

  会出现如下按钮:

 

   点击对应的格式就可以导出相应文件。

  如果出现问题,一般就是bootstrap、jQuery、bootstrap-table、bootstrap-table-export、tableExport的版本对应不上,选择合适的版本就行。

参考文章:

https://blog.csdn.net/m0_53620413/article/details/121126046

https://blog.csdn.net/qq_45859670/article/details/123306590

https://www.jianshu.com/p/9cc6c903c4b6

 

 

 

 

标签:function,文件,bootstrap,var,table,csv,上传
From: https://www.cnblogs.com/Peggy114514/p/17028679.html

相关文章

  • SpringMVC实现浏览器端大文件分片上传
    ​ 最近遇见一个需要上传超大大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。在某些业务中,大文件上传是一个比较重要的......
  • HTML5实现浏览器端大文件分片上传
    ​ 这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数下面直接贴代码吧,一些难懂的我大部分都加上......
  • JavaScript实现浏览器端大文件分片上传
    ​ 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对Http协议较模糊,故这次采用渐进的方式来学习文件上传的......
  • 前端利用formData格式进行数据上传,前端formData 传值 和 json传值的区别?
    前端利用formData格式进行数据上传,前端formData传值和json传值的区别? contentType常见的格式text/plain:纯文本格式application/json:JSON数据格式application/......
  • 一步一步学爬虫(4)数据存储之CSV文件存储
    (一步一步学爬虫(4)数据存储之CSV文件存储)4.3CSV文件存储CSV,全称Comma-SeparatedValues,中文叫做逗号分隔值或字符分隔值,其文件以纯文本形式存储表格数据。CSV文件是一个......
  • B/S实现浏览器端大文件分片上传
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传......
  • Web实现浏览器端大文件分片上传
    ​ 一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用......
  • WebUploader实现浏览器端大文件分片上传
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求     ......
  • AppStore 打包上传后提示“二进制文件无效” 的解决方法
    昨天提交打包提交App,将包上传到iTunesConnect之后,以为就能发布了,便点击构建版本,发现没有刚刚上传的包,于是就点击"预发行"看一下,会看到"已上传",过不久再刷新一次再看,就变成......
  • springboot整合mybatis以及bootstrap实现分页效果
      搜索后分页  pom依赖<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.or......