文件上传和下载前后端超级详细

最新推荐文章于 2024-07-06 10:46:46 发布
最新推荐文章于 2024-07-06 10:46:46 发布
阅读量957 收藏 2
点赞数
分类专栏： 后端 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45591668/article/details/105135624
版权
本文详细阐述了文件上传和下载的前后端实现。包括前端的上传按钮页面设计，后端的Controller层处理，以及两种不同的文件下载后端接口，推荐尝试其中的第二种方法。
摘要由CSDN通过智能技术生成

文件上传任意格式(主页面)

<!DOCTYPE html>


<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="../libs/layui/css/layui.css" media="all">
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>

<script src="../libs/layui/layui.all.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/xadmin.js"></script>
<script type="text/javascript" src="../js/global.js"></script>
<script type="text/javascript" src="../js/jquery.ext.js"></script>
<script src="../js/base.js"></script>
<script src="../js/custom.min.js"></script>
<script src="../libs/layui/lay/modules/laydate.js"></script>
<style>
.table {
    
	text-align: center;
	margin: 0px 10px
}

.input {
    
	width: 30%;
	float: left
}

.button {
    
	padding: 10px 20px;
}

.search {
    
	margin: 20px 10px
}

#orgUser {
    
	padding: 10px 10px 10px 10px
}
</style>
</head>
<body>

	<div class="tablePage">
		<div class="search">
			<div id="oprationBtn">
				<input type="text" name="resourceTitle" id="resourceTitle"
					lay-verify="title" autocomplete="off" placeholder="请输入文档名称"
					class="layui-input input">
				<button type="button" class="layui-btn button" onclick="submitBtn()">搜索</button>
				<button type="button" style="float: right" class="layui-btn button"
					onclick="addBtn()">上传文档</button>
			</div>
		</div>
		<div class="table">
			<table class="layui-hide" id="baomingTable" lay-filter="baomingTable"></table>
		</div>
	</div>






	<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" href="{
    {d.resource_url}}" download="{
    {d.file_name}}">下载</a>
<i class="layui-icon" lay-event="del">&#xe640;</i>

</script>
	<script src="../js/layui.all.js"></script>

	<script type="text/html" id="sex">
  {
    {
    #  if(d.sex == 1){
     }}
        <span>男</span>
  {
    {
    #  } else if(d.sex==0){
     }}
           女
  {
    {
    #  } else {
     }}
  男
{
    {
    #  } }}
</script>
	<script>
		var classId;
		var name = '';
		var resourceTitle = '';
		$(function() {
    
			classId = $.cookie('class_id');
			getData();
		})
		//新增
		function addBtn() {
    
			xinzengpxzn();

		}
		function getData() {
    
			///"classId":classId,
			var data = {
    
				"classId" : classId,
				"resourceTitle" : resourceTitle,
				"resourceType" : 0
			};
			layui.use('table',function() {
    
								table = layui.table;
								table.render({
    
											elem : '#baomingTable',
											id : "jsSelect",
											method : "POST",
											url : serverUrl.url
													+ serverUrl.queryTeacFileByPage,
											where : data,
											page : true,
											limit : 10,
											height : 450,
											even : true,
											loading : true,
											cols : [ [
													{
    
														field : 'file_name',
														align : 'center',
														title : '文档名称',
														width:'30%'
													}
													/* ,{field: 'class_name',align:'center', title: '所属班级',width:120} */
													, {
    
														field : 'publishDate',
														align : 'center',
														title : '上传时间',
														width:'22%'
													}, 
													 {
    
														field : 'publishName',
														align : 'center',
														title : '上传人',
														width:'12%'
													},{
    
														field : 'remak',
														align : 'center',
														title : '备注',
														width:'18%'
													}, {
    
														field : 'right',
														title : '操作',
														align : 'center',
														templet : '#barDemo'
													} ] ]
										});
							});
		};

		layui.use('table', function() {
    
			var table = layui.table;
			//监听表格复选框选择
			//监听工具条
			table.on('tool(baomingTable)', function(obj) {
    
				var data = obj.data;
				$.cookie('resourceTitle', data.resource_title);
				$.cookie('resourceUrl', data.resource_url);
				$.cookie('fileName', data.file_name);
				if (obj.event === 'downLoad') {
    
					var data1 = {
    
						"name" : "ssssasd",
						"fileName" : data.resource_url,
					}
					downLoad(data1);
				}  else if (obj.event === 'del') {
    
					layer.confirm('确定删除吗?', function(index) {
    
						var data1 = {
    
							"resourceId" : data.resource_id
						}
						delGuide(data1);
					});
				}
			});
		});
		function showBigImage(e) {
    
			layer.open({
    
				type : 1,
				title : false,
				closeBtn : 0,
				shadeClose : true,
最低0.47元/天 解锁文章
一只孤傲的狼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot + Vue 前后端分离项目实现文件上传至本地以及文件下载功能
2401_84010061的博客
03-29 1089
gorit:file:root:前端校招精编面试解析大全点击这里即可获取完整版pdf查看能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-etKlbxnL-1711722854000)][外链图片转存中…(img-KQfhCHUm-1711722854001)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
基于SpringBoot实现文件上传和下载(详细讲解And附完整代码)
热门推荐
a910247的博客
03-22 1万+
在Spring Boot中实现文件上传和下载通常涉及到使用Spring MVC的MultipartFile类来处理文件上传，同时配置一个Controller来处理上传和下载请求。 在Spring Boot中实现文件上传和下载通常遵循以下步骤： 配置文件上传位置和大小限制： 首先，需要在Spring Boot应用的配置文件（如application.properties）中配置文件上传的位置和大小限制。这通常涉及设置spring.servlet.multipart相关属性。
前后端分离架构文件上传与下载(含Vue + Spring完整代码)
Staba的博客
03-06 5178
本文采用前后端分离式的架构，其中涉及到文件下载的需求，文件下载在任何系统中都是比较常见的。对于前后端分离架构的文件下载与往常的写法有些许不同(试过直接使用a标签，href填上下载地址，发现行不通)，所以经过查找与尝试，以下文件下载前后端实现流程供大家参考。
前端中实现文件上传下载的三种解决方案(推荐)
最新发布
aryasei的专栏
07-06 740
网上搜的文章基本上大部分都是重复的，要么就是只有前端，没有后端，要么只有后端，没有前端，很多内容都是重复的，可以看得出来代码都是没有跑过的，没有经过实战测试的，要放在项目里面用那真的是开玩笑了。完全开放产品源代码，源代码包含前端，后端，控件源代码，控件源代码必须支持信创国产化环境，源代码必须满足企业100%自主安全可控需求，也就是说我们公司能够自主编译，自主发布，自主部署，自主开发。接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表。
（前端）前后端“文件流”，上传、接收、下载
qq_45043019的博客
11-10 3252
文件上传（两种） 方法1 -- 表单方式上传 通过input拾取到文件获取file const formData = new FormData() formData.append('file', file) request(`/mark/...`, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, data: formData }) 方法2 -- base64字符串上传 let
前端、后端node.js文件上传下载
CongJiYong的博客
12-02 1444
const experss = require('express'); const path = require('path'); const fs = require('fs'); const formidable = require('formidable'); var svgCaptcha = require('svg-captcha'); const app = experss(); app.listen(3000, () => { console.log(`web服务器工作在3000
文件的上传和下载（超详细）
醉后不知天在水，满船清梦压星河
01-17 9205
文件的上传和下载，是非常常见的功能。很多的系统中，或者软件中都经常使用文件的上传和下载。 比如：QQ 头像，就使用了上传。 邮箱中也有附件的上传和下载功能。 OA 系统中审批有附件材料的上传。 1.文件的上传介绍（重点） 要有一个 form 标签，method=post 请求 form 标签的 encType 属性值必须为 multipart/form-data 值 在 form 标签中使用 input type=file 添加上传的文件 编写服务器代码（这里使用Servlet 程序）接收，处理上传的数据
最新志汇超级外卖小程序5.6.5前后端
09-06
综上所述，志汇超级外卖小程序5.6.5前后端系统提供了一套全面的外卖解决方案，结合了先进的技术和用户友好的设计，对于提升餐饮行业的数字化水平具有显著作用。通过不断的升级和维护，确保商家和消费者都能享受到...
基于Springboot + Vue 开发的前后端分离博客(PC端自适应+移动端微信小程序+移动端App)+源代码+文档说明
11-29
- 前后端分离部署，适应当前潮流。 - 接入第三方登录，减少注册成本。 - 留言采用弹幕墙，更加炫酷。 - 支持代码高亮和复制，图片预览，深色模式等功能，提升用户体验。 - 搜索文章支持高亮分词，响应速度快。 - ...
花卷商城是一款基于 Springboot、Vue 的电商项目，前后端分离技术+源代码+文档说明
11-29
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合...
vue上传和下载前后台开发
04-30
前端采用vue.js开发，后端使用java进行上传下载开发。
图片上传功能，前后端完整示例
05-03
NULL 博文链接：https://yingyingsheji.iteye.com/blog/2434395
FormData实现文件上传（前端 后端）部分代码
12-13
FormData实现文件上传（前端 后端）部分代码 FormData实现文件上传（前端 后端) 工具类代码
springboot+vue实现超大文件分片极速上传与下载完整前后端源码
10-15
基于springboot与vue.js开发的前后端分离的超大文件分片上传下载系统，拥有简洁漂亮的界面，实现了G级别文件极速上传下载，断点续传以及秒传功能
前后端通用，轻量却强大的 HTTP 客户端（同时支持 WebSocket 以及 Stomp 协议）
05-02
如艺术一般优雅，像 1、2、3 一样简单，前后端通用，轻量却强大的 HTTP ...文件上传下载（过程控制、进度监听），上传下载如此简单！单方法回调，充分利用 Lambda 表达式，让你代码超级简洁！超级轻量，但性能卓越！
基于多租户框架SpringBoot，Spring Security，JWT，Vue 的前后端分离权限管理系统+代码+文档说明
11-28
`sql -- 超级管理员，拥有系统最高权限 select * from sys_user where super_admin_flag = 1 -- 租户管理员 select * from sys_user where...下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
项目开发中前后端文件的相关操作汇总【文件上传、文件下载】
weixin_43962264的博客
08-27 371
最近在写一个教学平台项目，其中一个需求是教师上传课程资料，然后教师还可以查询自己在某课程中发送的历史资料，并下载查看。其中就涉及到了文件上传、文件下载。 【上传文件】 前端（VUE）： 此功能的相关组件用对话框dialog包含： <el-dialog title="发送课程资料" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">..
Java后端上传文件和下载文件端口
qq_61126874的博客
03-18 854
下如果没有static这个文件夹，那么程序就会将上传的文件存放在零时目录中，我用的是windows系统，我的存储在C盘里面是某个位置，这里我就懒得翻了，有兴趣的可以自行百度一下，如果在java项目的根目录下创建一个static文件夹那么上传的文件就会上传到static文件夹中，如下图。我的文件目录如上图，在java项目的根目录上创建一个文件夹，我这个项目需要上传很多文件类型的文件，基本上跟第一部分上传文件的方法差不多，可以自行修改。存储在数据库中，所以在更换服务器的时候在数据库中拿出的数据还是原来的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值