html上传下载excel文件

最新推荐文章于 2024-08-01 13:23:22 发布

一叶知宁Max

最新推荐文章于 2024-08-01 13:23:22 发布

阅读量2.7k

点赞数

分类专栏：前端js+html 文章标签： html 前端 js

本文链接：https://blog.csdn.net/nurture_/article/details/123051100

版权

本文介绍了如何在前端使用HTML和JavaScript实现Excel文件的上传和下载功能。首先展示了用于添加上传下载按钮的HTML代码，接着给出了对应的JavaScript事件处理函数。后端接收到文件后进行处理。这是一个前端与后端交互的简单示例。

摘要由CSDN通过智能技术生成

背景：

页面有一个多级知识树（什么是多级知识树，windows系统的笔记本都用过吧，D盘下有ABCD四个文件夹，ABCD文件夹下分别有不同的文件，其实这就是一种树型结构。这里我的知识树简单一些，’语文‘下有一个节点‘汉字’，汉字下有一个节点‘字节’，这是简单的树，如下图）。本次目的是需要导出导出excel文件，后端处理逻辑，需要前端添加上传下载按钮。

第一步：前端提供的按钮（html代码）：

<!--下载excel-->
<button id="downloadExcel" class="excelUploadAndDownLoadShowControl">下载知识树</button> &nbsp;

<!--上传excel的Form表单-->
<form enctype="multipart/form-data" id="batchUpload"  action="user/upload" method="post" class="form-horizontal">
    <button id="uploadEventBtn" type="button" class="excelUploadAndDownLoadShowControl">上传知识树</button>
    <input type="file" name="file"  style="width:0px;height:0px;" id="uploadEventFile" class="excelUploadAndDownLoadShowControl">
    <input id="uploadEventPath"  disabled="disabled"  type="text" placeholder="请选择excel表" style="border: 1px solid #e6e6e6; height: 26px;width: 200px;" class="excelUploadAndDownLoadShowControl">
</form>
<button type="button"  id="uploadBtn" class="excelUploadAndDownLoadShowControl">确认上传&l