利用ajaxfileupload.js实现文件上传

版权声明：原创作品转载必须标明出处，谢谢配合！ https://blog.csdn.net/qq_38704184/article/details/86707475

 1.首先

 <script type="text/javascript" src="../js/ajaxfileupload.js"></script>

2.前端

<form class="am-form am-form-horizontal" id="informationSubit" enctype="multipart/form-data">
	<!--头像 -->
	<div class="user-infoPic">
	<div id="preview"></div>

	<div class="filePic">
	<input type="file" class="inputPic" id="imageFile" name="imageFile" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
	<img class="am-circle am-img-thumbnail" src="../images/getAvatar.do.jpg" alt="" />
	</div>
	<div id="picTip"></div>
	<p class="am-form-help">头像</p>
	<div class="info-btn">
	<input type="button" onclick="submitForm()" class="am-btn am-btn-danger" value="确定修改头像" />
	</div>
	</div>
	</div>
</form>

 3.js

function submitForm() {
			var type = "1";//展示照片
			var f = $("#imageFile").val();
			if(null == f || f == ""){
				
				$("#picTip").html("<span style = 'color : red' >错误提示:上传图片不能为空，请重新选择文件</span>");
				return false;
			}else{
				var extname = f.substring(f.lastIndexOf(".")+1,f.length);
				extname = extname.toLowerCase(); // 处理大小写
				if(extname != "jpeg" && extname != "jpg" && extname != "gif" && extname != "png"){
				
					$("#picTip").html("<span style = 'color : red'>错误提示：格式不正确，支持的图片格式为：JPEG、GIF、PNG!</span>");
					return false;
					
				}
			}
			//默认是单张图片 如果上传多张图片需判断
			var size = $("#imageFile").size;
			if(size > 2097152){
				$("#picTip").html("<span style='color:Red'>错误提示:所选择的图片太大，图片大小最多支持2M!</span>")
				return false;
			}
			informationSubit(name,type);
			
		}
		
		function informationSubit() {
			$.ajaxFileUpload({
				url :base_path+"/user/changeTouXiang.action?type = +1",
				secureuri : false,
				fileElementId : "imageFile", //文件上传空间的id属
				type : "POST",
				dataType : "json",
				data:null,
				success : function(data , status){
					var path = data.path;
					$("#picTip").html("<span style = 'color : red'>图片上传成功：图片地址为：path</span>")
					window.location.reload(); //重定向
				},
				error : function(data, status,e) {
					$("#picTip").html("<span style = 'color : red'>服务器响应失败处理函数!</span>")
				}
			});
			return false;
		}

 4.后台代码

@RequestMapping("/user/changeTouXiang.action")
	@ResponseBody
	public Map<String, Object> changeTouXiang(HttpServletRequest request) {
		MultipartResolver resolver= 
				new CommonsMultipartResolver(request.getSession().getServletContext());
		MultipartHttpServletRequest multipartHttpRequest = 
				resolver.resolveMultipart(request);
		MultipartFile file = multipartHttpRequest.getFile("imageFile");
		HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("filePath", file);
		return map;
	}