ajax完成表单上传文件提交到后台:

挤点时间出来记录下,今天遇到自己完成上传表单里面有文件的上传用ajax完成(前提是表单有这个属性enctype=“multipart/form-data”,提交方法位post),下面是我用spring boot搭的环境的解决办法:
首先表单里面是有文件上传的:

 <input type="file" class="text" name="file" /><span></span>

然后去到ajax写:

//这里的formData比较关键
var formData = new FormData($("#productAdd")[0]);
 $.ajax({
	//controller地址
	url: contextPath+"/product/addProduct" , 
	type: 'POST', 
	data: formData, 
	async: false,
	cache: false, 
	contentType: false, 
	processData: false, 
	dataType:"json",
	success: function (data) { 
		//成功的回调 
		if(data.status == 1){ 
			alert("添加成功");
			location.href=contextPath+"/backend/product";
		}
		else{
			alert("添加失败");
		}
	}, 
	error: function (returndata) { 
		//请求异常的回调 
		modals.warn("网络访问失败,请稍后重试!"); 
	} 
});

最后后台接收:

//这里的关键是springmvc给我们提供的MultipartFile接口,可以接收多文件表单上传
@RequestMapping("/addProduct")
@ResponseBody
public String addProduct(Product product,@RequestParam(value="file") MultipartFile file) {
	int num=0;
	try {			
		//得到上传的文件名,有后缀的,只限图片
		String fileName1 = file.getOriginalFilename();
		//得到.前的字符串
		String securityStr = fileName1.substring(0, fileName1.indexOf("."));
		//给字符串加密
		String fileStr1 = MD5Util.getMD5(securityStr);
		//得到.后的字符串
		String fileStr2 = fileName1.substring(fileName1.indexOf("."));
		//加密后的文件名
		String fileName2=fileStr1+fileStr2;
		//我们要把图片保存到服务器上,而不是硬盘上	
		String pathLujin=ProductController.class.getResource("/static/files").toString();
		//得到完整的文件名,因为上面的pathLujin会有file:/这个前缀,所以需要去掉
		File lastFile=new File(pathLujin.substring(5),fileName2);
		System.out.println("\n\n这时图片的存放位置:"+lastFile);
		//将完整的文件读到硬盘
		file.transferTo(lastFile);
		//最后获得刚从前台上传到硬盘的文件名字,有后缀的
		String filename = lastFile.getName();
		//将加密好而且上传到硬盘的文件名set到product对象中
		product.setFilename(filename);				
		num = productService.addProduct(product);						
	} catch (NoSuchAlgorithmException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} catch (IllegalStateException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return num>0?"{\"status\":\"1\"}":"{\"status\":\"2\"}";
}

好了,解决了。

猜你喜欢

转载自blog.csdn.net/weixin_42334396/article/details/83833993
今日推荐