Java Web使用ajax技术实现头像上传功能

所需js插件

在这里插入图片描述

界面设计

<div class="pic-box">
		<input class="fileInput" id="file" type="file" name="image" onchange="upload()">
</div>

ajax内容

		function upload() {
				var filename = $("#file").val();
				var username = "${USER_SESSION.username}";
				$.ajaxFileUpload({
				          url : "<%=basePath%>user/fileUpload.action", 
				          fileElementId : 'file', //文件上传空间的id属性 
				          type : 'post',
				          data:{"username":username,"image":filename},
				          dataType : 'json', //返回值类型 
				          success:function(data){
				          	console.log(data);
				          	alert("头像更新成功");         	
						}
					});
				window.location.reload();
				}

java代码

	   // 头像上传
		@RequestMapping("/fileUpload.action")
		@ResponseBody
		public String upload(String username, @RequestParam(value = "image") MultipartFile file,
				HttpServletRequest request) {
			// 保存数据库的路径
			String sqlPath = null;
			// 定义文件保存的本地路径
			String localPath = null;
			// 定义 文件名
			String filename = null;
			if (!file.isEmpty()) {
				localPath = request.getServletContext().getRealPath("/upload/images/");
				File filePath = new File(localPath);
				if (!filePath.exists()) {
					filePath.mkdirs();
				}
				// 生成uuid作为文件名称
				// String uuid = UUID.randomUUID().toString().replaceAll("-", "");
				// 获得文件类型(可以判断如果不是图片,禁止上传)
				String contentType = file.getContentType();
				// 获得文件后缀名
				String suffixName = contentType.substring(contentType.indexOf("/") + 1);
				// 得到 文件名
				filename = username + "." + suffixName;
				// 文件保存路径
				try {
					file.transferTo(new File(localPath + filename));
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
			System.out.println(localPath);
			// 把图片的相对路径保存至数据库
			sqlPath = "images/" + filename;
			System.out.println(sqlPath);
			int recordNum = userService.addImage(username, sqlPath);
			if (recordNum > 0) {
				return "ok";
			} else {
				return "error";
			}
		}

数据库设计

在这里插入图片描述
在这里插入图片描述

实现效果

点击上传头像,弹出文件选择窗口,选择图片,实现图片上传
在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值