ssm框架结合Ajax实现图片上传功能
先上代码
一.html代码
<div><img src="img/头像.png" alt="选择并上传头像" id="avatar_img" style="width: 100px;height: 100px;left:0;top: 0;"/><input type="file" id="avatar_file" name="avatar_file"accept="image/jpg,image/png,image/gif"style="width: 100%;height: 100px;opacity: 0;position: absolute;left:0px;top: 0;"/>
</div>
二.js代码
// 头像预览
$("#avatar_file").change(function () {// 获取上传文件对象var file = $(this)[0].files[0];// 读取文件URLvar reader = new FileReader();reader.readAsDataURL(file);// 阅读文件完成后触发的事件reader.onload = function () {// 读取的URL结果:this.result$("#avatar_img").attr("src", this.result);var formFile = new FormData();formFile.append("user_id",window.location.search.substr(1));formFile.append("file",file);var data = formFile;$.ajax({url : 'http://localhost:8080/addUserPicture',type : 'post',dataType : 'json',data : data,cache: false, //上传文件无需缓存processData: false, // 用于对参数进行序列化处理,这里必须设为falsecontentType:false, // 必须success : function(data) {console.log(data);if (data.state == 200) {alert("图片上传成功!")}if(data.state == 300){alert("图片上传失败!");return;}},})}
})$.ajax({url:"http://localhost:8080/showUserPicture?user_id="+userid,type:"post",success:function(result){var src = "http://localhost:8080/"+result$("#avatar_img").attr("src",src);}})
三.后端代码
1.两个工具类
package com.bzw.util;import java.io.Serializable;/** JsonResult工具类* 用于封装服务器到客户端的Json返回值** @author soft01**/
public class JsonResult<T> implements Serializable {// Serializable将对象的状态保存在存储媒体中以便可以在以后重新创建出完全相同的副本public static final int SUCCESS = 0;public static final int ERROR = 1;public static final int OTHER = 2;private int state;private String message = "";private T data;private String pass = "";public JsonResult() {state = SUCCESS;}// 为了方便,重载n个构造器public JsonResult(int state, String message, T data) {super();this.state = state;this.message = message;this.data = data;}public JsonResult(int state, String error) {this(state, error, null);}public JsonResult(int state, T data) {this(state, "", data);}public JsonResult(String error) {this(ERROR, error, null);}public JsonResult(T data) {this(SUCCESS, "", data);}public JsonResult(int state) {this(state, "", null);}public JsonResult(Throwable e) {this(ERROR, e.getMessage(), null);}public int getState() {return state;}public void setState(int state) {this.state = state;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public T getData() {return data;}public void setData(T data) {this.data = data;}public static int getSuccess() {return SUCCESS;}public static int getError() {return ERROR;}@Overridepublic String toString() {return "JsonResult [state=" + state + ", message=" + message+ ", pass=" + pass + ", data=" + data + "]";}
}
# UploadUtil工具类。使用UUID防止图片名称以及图片路径重复
package com.bzw.util;
import org.apache.commons.io.FilenameUtils;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;import java.io.File;import java.io.IOException;import java.util.UUID;
public class UploadUtil {
public static String imageUpload(@RequestParam(value="file") MultipartFile file, HttpServletRequest req){ // 获取要上传的目标位置,即是项目的upload文件夹所在的绝对路径 //如果添加了tomcat的虚拟映射路径,需要先新建一个upload文件夹 String path = req.getSession().getServletContext().getRealPath("upload"); // 获取文件的扩展名 String ext = FilenameUtils.getExtension(file.getOriginalFilename()); String filename = UUID.randomUUID().toString().replaceAll("-", "")+"."+ ext; // 写入文件成功之后,返回的数据,也就是数据库里要存的文件的url String src="upload/"+filename; File targetFile= new File(path,filename); try { if(!targetFile.exists()){ //写入文件 file.transferTo(targetFile); return src; } } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace();
} //写入文件失败,则返回空字符串 return ""; }}
2.controller
@PostMapping("/addUserPicture")public JsonResult<String> insertPicture(@RequestParam(value = "file") MultipartFile pictureFile, HttpServletRequest request,@RequestParam(value = "user_id") int userid){// pictureURL是数据库里picture_url的值,这里用到一个封装的工具类UploadUtilString pictureURL = UploadUtil.imageUpload(pictureFile, request);System.out.println("pictureURL:" + pictureURL);//获取上传时的文件名String pictureName = FilenameUtils.getName(pictureFile.getOriginalFilename());System.out.println("pictureName:" + pictureName);// 把图片数据保存到数据库User user = new User();//暂时将user_tel,user_email存放图片名称和路径user.setUser_tel(pictureName);user.setUser_email(pictureURL);try {userService.updateUser(user,userid);return new JsonResult<>(200, "上传成功!", user.getUser_email());} catch (Exception e) {return new JsonResult<>(300, "上传失败", null);}}@PostMapping("/showUserPicture")public String showUserPicture(@RequestParam(value = "user_id") int userId){User user = new User();try {user = userService.selectUser(userId);} catch (Exception e) {e.printStackTrace();}return user.getUser_email();}
值得注意的地方:
1.我使用的是IDEA,要在target目录下手动创建一个upload文件夹,否则会找不到文件路径。
2.前端访问图片路径是 服务器端口号+图片相对路径
参考博客:
https://blog.csdn.net/linmengmeng_1314/article/details/84944056
ssm框架结合Ajax实现图片上传功能相关推荐
- SSM框架-添加信息及图片上传到本地MultipartResolver-foreknow_cms
MultipartResolver 用于处理文件上传,当收到请求时 DispatcherServlet 的 checkMultipart() 方法会调用 MultipartResolver 的 isM ...
- 利用策略模式结合alibaba/alpha框架优化你的图片上传功能
图片上传作为一个App经常用到的功能,项目中可以使用各种成熟的框架去完成,但往往实际的情况比想象的复杂.假设我们的上传功能需要满足下面的情况: 支持上传一张图 支持上传多张图 上传多张图时能获取到每张 ...
- ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
- html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
- c ajax 上传图片插件,ajax实现图片上传和预览
图片上传功能 html结构: ![](6f4fbfb7/addimg.png) 在html中input的type=file就可以实现文件的上传功能,在其属性中也包含一个accept='':可以限制文件 ...
- 《小白H5成长之路50》js与PHP配合完成图片上传功能
"小白!还记得之前我们说过的jQuery中的ajax异步加载数据的方法么?" "记得,之前的代码我这里还有,你看看是不是这个?" 老朱:"恩,没错,通 ...
- TinyMCE 新增本地图片上传功能
TinyMCE 新增本地图片上传功能 在TinyMCE 在处理富文本时,可以通过网站的相对路径录入图片地址.这样TinyMCE 就可以正常显示图片了.其实该功能属于普通HTML富文本控件基本功能了.现 ...
- ckeditor java 上传_java使用CKEditor实现图片上传功能
java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...
- 关于微信内置浏览器,打开图片上传功能,调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题 前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
最新文章
- JPA 中文乱码问题
- PAT甲级1100 Mars Numbers:[C++题解]进制位、使用stringstream类读入
- 在NumericStepper控件中使用嵌入字体显示数字.
- 软件工程作业之小学数学题目
- 本程序主要实现了一个方阵的求逆与实现了逆矩阵和原矩阵的乘积为单位矩阵
- 《金色梦乡》金句摘抄(四)
- c#调用本地命令并截取Output
- indesign拖进去颜色变灰_在 InDesign 中管理颜色
- java string能存储多长_String 有多长?
- 【转】boost 库后缀名
- python爬虫数据存储文本_Python爬虫开发系列之五》数据存储为TXT、JSON格式
- shell命令回车_VIM学习笔记 静默执行命令(silent)
- python教程视频ajax_Ajax异步请求实战案例讲解视频教程
- 奇趣分享综合趣事百科文章类型discuz模板
- 鲁迅朱安:留给世纪的背影
- OpenGL VBO, PBO与FBO
- Nuscenes 完整版数据集批量下载
- 西工大NOJ数据结构理论——013.以十字链表为存储结构实现矩阵相加(严5.27)
- 金融风控项目-# 相关业务介绍
- 【Python】Pandas Excel file format cannot be determined, you must specify an engine manually.报错【已解决】
热门文章
- odata expand
- RFC发布ODATA
- EFI Network…
- 全球变暖详细题解(蓝桥杯bfs)
- 2021年全球V型温度计行业调研及趋势分析报告
- Access 与SQL数据类型
- QCC51XX---Ellisys Bluetooth Analyzer 抓取步骤
- UTONMOS链游将为GameFi游戏玩家带来更多的可能
- 微信视频用html5不能用,仿照laya官方demo做了一个视频播放的UI,为啥在微信里不能用?...
- 【工具类】commons-lang3包下StringUtils.isNotBlank()和StringUtils.isNotBlank()的区别