关于文件上传和普通字段表单提交的问题

本文对比了两种文件上传方式:一是直接通过表单提交;二是利用JS和Ajax进行异步提交。详细介绍了各自的实现方法及控制器接收数据的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

单独的文件上传和普通字段的上传还是有区别的。这里主要列举它们在一个表单中提交的两种处理方式,一种直接点击提交按钮表单提交,另外一种点击通过js提交。

在作比较之前,先贴下controller代码

    
    @ResponseBody
    @RequestMapping("upload")
    public boolean upload(User user,MultipartRequest mreq){
    	System.out.println("user:"+user.toString());
    	MultipartFile mfile=mreq.getFile("file");
    	System.out.println("文件是否为空:"+mfile.isEmpty());
    	return true;
    }

1. 点击按钮,表单提交

1.1 jsp页面表单代码如下

表单提交
<form action="ProjectFormMvn/user/upload" enctype="multipart/form-data" method="post">
	名称:<input type="text" name="account" /><br/>
	文件:<input type="file" name="file"/><br/>
	<input type="button" value="提交"/>
</form>

1.2 点击提交



通过控制台可以看到,controller已经正常接到值了。

2.通过js提交

2.1  jsp页面代码如下

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	function clickMe(){
		var form=document.getElementById("MyForm"),
		formData=new FormData(form);
		$.ajax({
			url:'/ProjectForMvn/user/upload',
			type:'POST',
			data:formData,
			processData:false,
			contentType:false,
			success:function(data){
				alert(data);
			}
		})
	}
</script>

js提交
<form action="###" enctype="multipart/form-data" method="post" id="MyForm">
	名称:<input type="text" name="account" /><br/>
	文件:<input type="file" name="file"/><br/>
	<input type="button" onclick="clickMe();" value="提交"/>
</form>

2.2 点击提交



js中ajax提交方式千千万,这里只介绍这一个,主要涉及到FormData的应用。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值