ssm框架的项目中用户图片的上传功能

最新推荐文章于 2023-07-02 15:10:07 发布

原创最新推荐文章于 2023-07-02 15:10:07 发布 · 3.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#图片上传 #ssm框架

java开发专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了一个Web项目中图片上传功能的实现过程，包括前端页面设计、JavaScript交互逻辑及后端处理流程。通过具体代码示例展示了如何利用jQuery插件简化图片上传操作，并将上传后的图片地址保存至数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台管理的web项目中，需要完成图片的上传功能

工具准备：一、图片上传的必要JS文件；二；当前页面中JS重写提交图片的方法；三、后台接收和处理图片的方法

整体思路：一、HTML中添加文件上传按钮；

二、选择图片的同时将图片传到后台进行下载和返回图片存储的地址；

三、前台获取到后台返回的图片地址，然后将地址值存到表单的输入框中；

四、提交表单请求，存储地址到数据库

详细步骤如下：

***项目中添加文件上传相关的JS文件，

***当前页面对这些JS文件的引用，

***重写上传图片的方法

***后台添加处理图片上传的方法，将图片下载下项目中指定的路径，将图片存储地址返回给前台

***前台将接受的图片地址添加到表单，等待提交并将地址传到数据库

***（无法上传完整的代码以及JS文件，再次只提供一个详细的思路，还请见谅）

*****HTML代码

*****JS方法

*****后台处理上传图片的方法

@RequestMapping("/headimg")
@ResponseBody
public Map<String, Object> headimg(HttpServletRequest request,
HttpServletResponse response) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; // 获得文件：
List<MultipartFile> myfiles = multipartRequest.getFiles("files");
// 可以在上传文件的同时接收其它参数
// 如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
// 这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建
String realPath = request.getSession().getServletContext()
.getRealPath("/upload/headimages");
// 设置响应给前台内容的数据格式
response.setContentType("text/plain; charset=UTF-8");
// 设置响应给前台内容的PrintWriter对象
Map<String, Object> map = new HashMap<String, Object>();
// 上传文件的原名(即上传前的文件名字)
String originalFilename = null;
// 如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
// 如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
// 上传多个文件时,前台表单中的所有<input
// type="file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件

List<Map<String, String>> datalist = new ArrayList<Map<String,String>>();
String url = "";
for (MultipartFile myfile : myfiles) {
if (myfile.isEmpty()) {
map.put("error", "请选择文件后上传");
return map;
} else {
originalFilename = myfile.getOriginalFilename();
System.out.println("文件原名: " + originalFilename);
map.put("filename", originalFilename);
originalFilename = new Date().getTime()
+ ""
+ originalFilename.substring(originalFilename
.lastIndexOf("."));
System.out.println("文件名称: " + myfile.getName());
System.out.println("文件长度: " + myfile.getSize());
System.out.println("文件类型: " + myfile.getContentType());
map.put("filesize", myfile.getSize());

String type= originalFilename.substring(originalFilename.lastIndexOf(".")+1);
type=type.toUpperCase();

if(ImageType.indexOf(type)>0){
map.put("filetype","Image");//图片
}else if(TableType.indexOf(type)>0){
map.put("filetype","Table");//表格
}else if(WordType.indexOf(type)>0){
map.put("filetype","Word");//word
}else if(TxtType.indexOf(type)>0){
map.put("filetype","Txt");//文本
}else if(CompressType.indexOf(type)>0){
map.put("filetype","Compress");//压缩
}else{
map.put("filetype","Other");//其他
}
System.out.println("========================================");
try {
// 这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
// 此处也可以使用Spring提供的MultipartFile.transferTo(File
// dest)方法实现文件的上传
FileUtils.copyInputStreamToFile(myfile.getInputStream(),
new File(realPath, originalFilename));
//if(map.get("ify")!=null){//是否需要压缩
url=Configure.CONFIG_PROJECT_PATH+"/upload/headimages/" + originalFilename;
/*}else{
//图片压缩处理
ImgCompress imgCom = new ImgCompress(realPath,originalFilename);
imgCom.resizeFix(400, 400);
url="/upload/y" + originalFilename;
} */

zipWidthHeightImageFile(request.getSession().getServletContext().getRealPath("")+url,request.getSession().getServletContext().getRealPath("")+url,120,120,(float) 0.7);

} catch (IOException e) {
System.out.println("文件[" + originalFilename
+ "]上传失败,堆栈轨迹如下");
e.printStackTrace();
map.put("error", "1`文件上传失败，请重试！！");
return map;
}
}
}
map.put("url", url);
return map;
}