SpringMVC上传图片

Posted 2022-08-29 hzb462606

1、前端H5

<div class="container-fluid">
		<!-- <div id="panel-advancedoptions"> -->
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-midnightblue">
						<div class="panel-heading">
							<h2>修改头像</h2>
						</div>
						<div class="panel-body">
								<div class="row">
									<div class="col-md-1">
										<button type="button" class="btn btn-primary btn-sm" id="btn_upload" >
											<span class="fa fa-upload"></span> 上传头像图片
										</button>
									</div>
									<div class="col-md-11">
											<h5></h5>（仅限上传单张10M以下png、jpg图片）</h5>
											<input type="file" class="hidden" id="InputFile" />
									</div>
								</div>
								</br>
								<div class="row">
									<div class="col-md-6">
										<img src="images/UserAvatars/robo.jpg" class="img-thumbnail uploadImges" >
									</div>
									
								</div>
						</div>
					</div>
				</div>
			</div>
			
		<!-- </div> -->
</div>

 

2、JS

 $("#btn_upload").click(function()
				$("#InputFile").trigger("click");
                openUploads("InputFile");
			);
			function openUploads(id)
				$("#"+id).unbind().change(function()
					var formdata = new FormData();
					formdata.append(‘file‘,$("#"+id)[0].files[0]); //获取图片信息
					//console.log($("#"+id)[0].files[0]);
					$.ajax(
						type: ‘POST‘,
						url: "http://localhost:8078/lifeTrackDB/UploadUserAvatars",
						data:formdata,
						cache:false,
						dataType: ‘json‘,
						processData:false,
						contentType:false,
						success : function (result)
						
							console.log(result);
							if (result.status)
							
								//$(‘#‘+id).attr(‘src‘,‘images/UserAvatars/‘+result.message);
								alert(result.message);
							
							else
							
								$.alert(result.message,‘‘);
							
						
					);
				);
			

3、JAVA后台

@RequestMapping(value="/UploadUserAvatars")
@ResponseBody
public void UploadUserAvatars(HttpServletRequest request,HttpServletResponse response,
			 @RequestParam(value = "file") List<MultipartFile> files) throws Exception
		
        String path=System.getProperty("user.dir");
       
	if (null != files || 0 != files.size())   
		for(MultipartFile file:files) 
			//System.err.println("文件名：" + file.getOriginalFilename() + "---contentType：" + file.getContentType());  
			file.transferTo(new File(path+"/UserAvatars/"+file.getOriginalFilename()));
			response.getWriter().write("\"status\": true, \"code\": \"200\",\"message\":\"上传成功\"");
		
        else 
        	//response.getWriter().write("handleCallback(\"status\": false, \"code\": \"200\",\"message\":\"上传失败\")");
        	response.getWriter().write("\"status\": false, \"code\": \"200\",\"message\":\"上传失败\"");