文件上传

最新推荐文章于 2025-10-20 08:35:55 发布
原创 最新推荐文章于 2025-10-20 08:35:55 发布 · 218 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍同步与异步文件上传的实现方法，涵盖前端表单设置、后端依赖配置及Spring MVC处理流程，深入探讨文件存储路径设定、唯一文件名生成与错误处理策略。
  • 同步文件上传
    1、前端页面
    form表单的提交方式为type=post,encytype属性值为“multipart/form-data”
    在这里插入图片描述
    input输入域的类型为type=“file”
    在这里插入图片描述
    2、后端
    上传和下载的jar包
 <!-- upload -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>

<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>



springmvc.xml文件中配置CommonsMultiPartResolver

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"></property>
        <property name="maxUploadSize" value="#{500*1024*1024}"></property>
    </bean>

目标方法的参数上使用MulTipartFile类型来接收

package com.ujiuye.pro.controller;

import com.ujiuye.pro.bean.Attachment;
import com.ujiuye.pro.bean.Project;
import com.ujiuye.pro.service.AttachmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Controller
@RequestMapping("/attach")
public class AttachmentController {

    @Autowired
    private AttachmentService attachmentService;

    @RequestMapping(value = "/saveInfo",method = RequestMethod.POST)
    public String saveInfo(Attachment atta, MultipartFile attachment, HttpSession session){
        ServletContext context=session.getServletContext();
        String realPath = context.getRealPath("/upload");
        File file=new File(realPath);
        if(!file.exists()){
            file.mkdirs();
        }
        
        //上传的文件名
        String originalFilename = attachment.getOriginalFilename();
        String realName=UUID.randomUUID().toString().replaceAll("-","")+originalFilename;
        try {
            attachment.transferTo(new File(realPath+"/"+realName));
        } catch (IOException e) {
            e.printStackTrace();
        }

        atta.setPath(realPath+"/"+realName);
        attachmentService.saveInfo(atta);

        return "redirect:/project-file.jsp";
    }
}
  • 异步文件上传
    异步文件上传使用ajax并且使用Fomdata对后端传送数据
	function commit(){
			// $("#form2").submit();
			var pid=$("#projects").val();
			var attname=$("#attname").val();
			var attdis=$("#attdis").val();
			var remark=$("#remark").val();
			//files是一个数组，在上传文件时若上传一个文件则使用files[0]
			//若上传多个文件则使用files
			//$("#file")[0]中的[0]是将jQuery对象转为js对象
			var file=$("#file")[0].files[0];
			var formdata=new FormData();
			formdata.append("proFk",pid);
			formdata.append("attname",attname);
			formdata.append("attdis",attdis);
			formdata.append("remark",remark);
			formdata.append("attachment",file);
			$.ajax({
				type:"POST",
				url:"${pageContext.request.contextPath}/attach/saveInfo",
				data:formdata,
				cache:false,           //不要让浏览器有缓存
				processData:false,    //告诉浏览器，不要进行数据转换
				contentType:false,    //告诉浏览器，不要设置编码
				success:function (msg) {
					  if(msg.statusCode==200){
					  	    window.location.href="${pageContext.request.contextPath}/project-file.jsp"
					  } else{
					  	if (confirm("您确定要离开该页面吗？"))  {
					  		window.location.href="${pageContext.request.contextPath}/project-file.jsp"
						}
					  }
				}
			});
		}
	</script>
</head>
<body leftmargin="8" topmargin="8" background='skin/images/allbg.gif'>

<!--  快速转换位置按钮  -->
<table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#D1DDAA" align="center">
<tr>
 <td height="26" background="skin/images/newlinebg3.gif">
  <table width="58%" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td >
    当前位置:项目管理>>添加附件
 </td>
 </tr>
</table>
</td>
</tr>
</table>

<form name="form2" id="form2" action="${pageContext.request.contextPath}/attach/saveInfo" enctype="multipart/form-data" method="post">

<table width="98%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center" style="margin-top:8px">
<tr bgcolor="#E7E7E7">
	<td height="24" colspan="2" background="skin/images/tbg.gif">&nbsp;添加附件&nbsp;</td>
</tr>
<tr >
	<td align="right" bgcolor="#FAFAF1" height="22">选择项目：</td>
	<td  align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
		<select id="projects" name="proFk">
			<option>请选择...</option>
		</select>
	</td>
</tr>
<tr >
	<td align="right" bgcolor="#FAFAF1" height="22">附件名称：</td>
	<td  align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
		<input size="26" id="attname" name="attname"/>
	</td>
</tr>
<tr >
	<td align="right" bgcolor="#FAFAF1" height="22">附件信息描述：</td>
	<td  align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
		<input size="52" id="attdis" name="attdis"/>
	</td>
</tr>
<tr >
	<td align="right" bgcolor="#FAFAF1" height="22">附件：</td>
	<td  align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
		<input type="file" id="file" name="attachment"/>
	</td>
</tr>


<tr >
	<td align="right" bgcolor="#FAFAF1" >备注：</td>
	<td colspan=3 align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" >
		<textarea id="remark" rows=10 cols=130 name="remark"></textarea>
	</td>
</tr>


<tr bgcolor="#FAFAF1">
<td height="28" colspan=4 align=center>
	&nbsp;
	<a href="javascript:commit()" class="coolbg">保存</a>
	<a href="javascript:history.go(-1)" class="coolbg">返回</a>
</td>
</tr>
</table>

</form>

后端接收跟同步文件上传大同小异

package com.ujiuye.pro.controller;

import com.ujiuye.pro.bean.Attachment;
import com.ujiuye.pro.bean.Project;
import com.ujiuye.pro.service.AttachmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@Controller
@RequestMapping("/attach")
public class AttachmentController {

    @Autowired
    private AttachmentService attachmentService;

    @RequestMapping(value = "/saveInfo",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> saveInfo(Attachment atta, MultipartFile attachment, HttpSession session){
        ServletContext context=session.getServletContext();
        String realPath = context.getRealPath("/upload");
        File file=new File(realPath);
        if(!file.exists()){
            file.mkdirs();
        }
        
        //上传的文件名
        String originalFilename = attachment.getOriginalFilename();
        String realName=UUID.randomUUID().toString().replaceAll("-","")+originalFilename;
        try {
            attachment.transferTo(new File(realPath+"/"+realName));
        } catch (IOException e) {
            e.printStackTrace();
        }

        atta.setPath(realPath+"/"+realName);
        attachmentService.saveInfo(atta);

        Map<String,Object> map=new HashMap<String,Object>();
        map.put("statusCode",200);
        map.put("message","保存成功");

        return map;
    }
}
Vue2 - 实现大文件上传分片/切片+本地选择文件上传超大文件，支持图片、视频、文档等各种文件，vue大文件切片上传+断点续传+上传进度条+失败自动重传完整运行示例源码（支持上传单个文件或批量上传）
🏆 前端领域优质创作者
08-26 3066
vue实现大文件上传，大文件上传如何做断点续传，上传视频，上传文档，实现大文件上传（切片上传）实现大文件上传到服务器教程，支持批量多文件、文件夹上传、断点续传、上传进度条、上传预估时间、失败自动重传、暂停继续、快传，解决前端超大文件无法上传问题，vue分块上传，断点续传，实现大文件上传以及断点续传，vue多文件分片上传实现，vue如何将文件上传到服务器，实现分片大文件上传，vue分片 断点续传 大文件上传，VUE实现大文件上传 分片上传 进度条，vue文件分片上传，vue如何上传很大的文件，在选择文件后，按
vue3 - 实现大文件分片上传+断点续传+进度条+秒传+可暂停继续功能，vue3中实现分片大文件上传 切片上传axios大文件支持单个/批量同时上传到服务器（大文件切片上传实现秒传+详细示例源码）
热门推荐
高级前端工程师
04-13 1万+
vue3超大文件批量同时上传且带进度条，VUE3大文件分片切片上传到服务器，Axios大文件上传到后端，可暂停上传点击后继续传，文件分块，上传进度条，Vue3大文件上传和断点续传，vue3中实现分片大文件上传，前端切片上传文件可暂停，大文件分片上传，暂停续传，vue实现文件分片上传，支持文件分块上传，解决前端超大文件无法上传问题，能够在上传过程中暂停、继续上传的组件，Vue3项目中大文件切片上传实现秒传、断点续传的详细实现教程，vue3+axios，node后端，上传大文件报错，cors跨域报错，上传失败，
Java监控度量Micrometer全解析
最新发布
禅与计算机程序设计的艺术
10-20 1万+
如下图，我们会将一个大文件进行切片，然后调用文件上传接口，将分片base64数据、源文件名称、分片大小、分片个数、索引号传到服务器上。这个是Spring框架自带的一个类，便于用户更好操作网络传输的文件，这个类为我们提供了很多便捷操作的API。getName() : 获取文件名 getOriginalFilename() : 返回客户端系统中原始文件名。getContentType() : 获取文件内容类型。isEmpty() : 判断文件是否为空。getSize() : 获取文件大小，以字节为单位。
easyUI文件上传
07-10
EasyUI文件上传功能是网页应用中常见的需求，它允许用户方便地将本地文件上传到服务器。EasyUI是一个基于jQuery的用户界面插件集合，提供了多种组件，如表格、树形菜单、对话框等，用于快速构建美观且功能丰富的Web...
javaweb简单实现文件上传与下载源代码
09-18
在JavaWeb开发中，文件上传和下载是常见的功能需求，特别是在构建交互性强的Web应用时。本源代码示例提供了一个简单的实现，帮助开发者理解如何处理这些操作。下面将详细解释涉及的技术点。 1. **文件上传** - **...
Java中实现文件上传
Hanshy123的博客
08-02 4132
1. springmvc的文件上传: 1.第一种文件上传到本地服务器下。 2.第二种文件上传到oss服务器上。[阿里云] 2. 第一种的缺陷:集群项目无法共享本地上传后的文件 3. 文件上传的步骤: 1.引入commons-fileupload依赖 oss依赖 2.配置文件上传解析器.CommonsMultipartResolver. 3.创建文件上传的表单: 提交方式。 entype编码: 4.编写代码;
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值