SpringMVC上传图片

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":"上传失败"}");
        }
		
}

  

原文地址:https://www.cnblogs.com/hzb462606/p/11414680.html