Java 前端使用Ajax通过FormData传递文件和表单数据到后台

6 篇文章 0 订阅
6 篇文章 0 订阅
<form id="testform" method="post" >
		<input type="text" id="name" name="name" />	
		<input type="text" name="age" />
		<input type="text" name="hobby" />
		<input type="file" id="image" name="image" />
		<input id="yxrq" name="birthday" class="easyui-datebox" data-options="editable:false,width:200" />
	</form>
	<button id="tijiao" onclick="tijiao()">提交</button>

1,当仅仅想上传文件到后台

function tijiao(){
		var file = $("#image")[0].files[0];
	    //打印file 为对象
	    console.log(file);
	    var formObj = new FormData();
	    formObj.set('image', file);
	    $.ajax({
	        url:'test/test3',
	        data:formObj,
	        type: 'POST',
	        dataType:'json',
	        processData:false,
	        contentType:false,
	        success:function(data){
				alert(data.Msg);
			}
	    });

}   

@RequestMapping("/test3")
	public Map<String,Object> test3( @RequestParam("image") MultipartFile uploadFile)

2.上传表单数据和文件

var uploadFile = new FormData($("#testform")[0]);
		console.log(uploadFile);
			$.ajax({
				url:"test/test3",
				type:"post",
				data:uploadFile,
				cache: false, 
				dataType:'json',
				contentType: false, //不设置内容类型
				processData: false, //不处理数据
				success:function(data){
					alert(data.Msg);
				}		
			});

@RequestMapping("/test3")
	public Map<String,Object> test3(Test test3, @RequestParam("image") MultipartFile uploadFile)//Test为实体类

3.上传多个表单数据,那么以json形式上传。

function tijiao(){
	var file = $("#image")[0].files[0];
    //打印file 为对象
    console.log(file);
    var formObj = new FormData();
    formObj.set('image', file);
    var formStr = JSON.stringify($('#testform').serializeJSON());
    formObj.set('test3', formStr);
    
		console.log(formObj);
			$.ajax({
				url:"test/test3",
				type:"post",
				data:formObj,
				cache: false, 
				dataType:'json',
				contentType: false, //不设置内容类型
				processData: false, //不处理数据
				success:function(data){
					alert(data.Msg);
				}		
			});
} 

 @RequestMapping("/test3")
	public Map<String,Object> test3(String test3, @RequestParam("image") MultipartFile uploadFile) 

当input是easyUI的easyui-filebox 文件对象数据 用var file = $("#image")[0].files[0]得不到,

用name属性得到  var file = $("input[name='zp']")[0].files[0];

 

  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值