ajax+springboot上传图片讲解(修改用户头像)
HTTP请求方法说明
在讲解ajax请求实现前，我们先了解一下http常用的6个请求方法：
| 方法 | 功能说明 |
|---|---|
| GET | 向特定的资源发出请求，url会被标识在浏览器地址栏 |
| POST | 向指定资源提交数据进行处理请求，例如提交表单或者上传文件。 |
| PUT | 向指定资源位置上传其最新内容 |
| DELETE | 请求服务器删除Request所标识的资源 |
| HEAD | 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头 |
jquery发送ajax请求，简化原生js发送ajax的繁琐过程
ajax请求主要使用得比较多的两个场景就是，提交普通参数的请求和提交含有文件的请求，
下面我将会通过编写两个小示例来说明
1.第一个使用ajax异步请求修改用户密码的小示例
前端发送异步请求：
function updatePsd() {var originalPsd = $("#originalPsd").val(); //原密码var newPsd = $("#newPsd").val(); //新密码var userId = $("#userId").val(); //用户id$.ajax({url: "/updatePassword", //请求urltype: 'POST', //请求方法data: { //请求参数"originalPsd": originalPsd,"newPsd": newPsd,"userId": userId},success: function (data) { //请求成功时调用$.alert({title: data.code,content: data.msg,});},error: function (data) { //请求失败时调用$.alert({title: 'Error',content: '修改密码失败，请稍后重试！',});}});}
后端controller，使用springboot：
/*** 登录状态下，修改密码** @return*/@RequestMapping(value = "/updatePassword")@ResponseBodypublic Map<String,String> changePsd(@RequestParam(value = "userId") String userId,@RequestParam(value = "originalPsd") String originalPsd,@RequestParam(value = "newPsd") String newPsd) {Long Id = Long.parseLong(userId.trim());String originalPassword = MD5Util.getMD5(originalPsd);String newPassword = MD5Util.getMD5(newPsd);boolean flag = userService.updatePasswordByUserId(Id,originalPassword ,newPassword );Map<String,String> data = new HashMap<>();if (flag){data.put("code","success");data.put("msg","成功修改密码！");return data;}else {data.put("code","error");data.put("msg","修改密码失败，请稍后重试！");return data;}}
Mapper
UPDATE user set password = #{newPsd}where user_id = #{userId}and password = #{originalPsd}
2.第二个使用ajax异步发送formdata修改用户头像的小示例
说明：修改头像，需要上传图片，不同于普通的提交参数，需要使用formdata发送文件数据流
html
<style type="text/css">.file {position: relative;}.file input {position: absolute;font-size: 18px;right: 0;top: 0;opacity: 0;}</style><div class="col-md-2" style="margin-top: 10px;"><label class="control-label file"><div> //原头像<img id="userUrl" style="border-radius: 100px;" src="${user.userUrl}"> //后端传过来的url</div><input type="file" id="photo"><input type="hidden" id="userId" value="${user.userId}"></label><p style="margin-left: 20px;">点击头像选择图片，再点击上传</p><input id="changeBtn" style="width: 100px;margin-left: 20px;" class="btn btn-info" value="上传"></div>
页面效果
js
$("#changeBtn").click(function () {var formData = new FormData();formData.append("photo",$('input#photo')[0].files[0]); //拿到提交的图片文件formData.append("userId",$("#userId").val()); //需要把图片和用户关联起来$.ajax({url: "/changePhoto",type: 'POST',contentType: false,processData: false,data: formData,success: function (data) { //请求成功时调用$.alert({title: data.code,content: data.msg,});$("#userUrl").attr("src", data.userUrl); //使用jquery修改图片的src},error: function (data) { //请求失败时调用$.alert({title: 'Error',content: '修改头像失败，请稍后重试！',});}});});
后端controller
/*** 修改个人头像** @return*/@RequestMapping(value = "/changePhoto")@ResponseBodypublic Map<String,String> changePhoto(@RequestParam MultipartFile photo, @RequestParam Long userId){Map<String,String> data = new HashMap<>();if (photo.isEmpty()){data.put("code","error");data.put("msg","上传图片为空！");return data;}//获取MultipartFile文件的后缀String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1);if (suffix.equalsIgnoreCase("jpg") ||suffix.equalsIgnoreCase("jpeg") ||suffix.equalsIgnoreCase("png")){OutputStream os = null;InputStream inputStream = null;String fileName = (userId + "") + System.currentTimeMillis() + ".jpg";String userUrl = savePath+fileName;try {inputStream = photo.getInputStream();} catch (IOException e) {e.printStackTrace();}try {byte[] bs = new byte[1024];int len;// 输出的文件流保存到本地文件File tempFile = new File(writePath);if (!tempFile.exists()) {tempFile.mkdirs();}os = new FileOutputStream(tempFile.getPath() + File.separator + fileName);// 开始读取while ((len = inputStream.read(bs)) != -1) {os.write(bs, 0, len);}os.flush();userService.updateUserUserUrl(userId,userUrl);System.out.println(userUrl);data.put("userUrl", IpConfig.ip + userUrl);data.put("code", "success");data.put("msg","修改头像成功");return data;} catch (IOException e) {e.printStackTrace();data.put("code","error");data.put("msg","修改头像失败，请稍后重试！");return data;} catch (Exception e) {e.printStackTrace();data.put("code","error");data.put("msg","修改头像失败，请稍后重试！");return data;} finally {// 完毕，关闭所有链接try {os.close();inputStream.close();} catch (IOException e) {e.printStackTrace();}}}else {data.put("code","error");data.put("msg","上传头像格式需要为jpg、jpeg、png！");return data;}}
Mapper
<!-- 修改用户头像 --><update id="updateUserUserUrl">UPDATE user set user_url = #{userUrl}where user_id = #{userId}</update>
傷城~
系统管理员
妖狐艹你老母
朱雀
今天药忘吃喽~
╰+攻爆jí腚メ
亦凉
还没有评论，来说两句吧...