1.首先引入jersey jar包
2.在配置文件中，配置允许上传图片
3.修改增加商品页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/back_page/head.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>babasport-add</title> <script type="text/javascript"> function uploadPic() { var options={ url:"/cn/upload/uploadPic.do", 访问保存图片的controller层的方法 dataType:"json", type:"post", success:function(data){ //回调2个路径 //url 绝对路径，用于在页面上显示图片 //path 相对路径，保存在数据库中 $("#allImgUrl").attr("src",data.url); 显示图片 $("#path").val(data.path) } } $("#jvForm").ajaxSubmit(options); } </script> </head> <body> <div class="box-positon"> <div class="rpos">当前位置: 品牌管理 - 添加</div> <form class="ropt"> <input type="submit" onclick="this.form.action='v_list.shtml';" value="返回列表" class="return-button"/> </form> <div class="clear"></div> </div> <div class="body-box" style="float:right"> <form id="jvForm" action="/cn/brand/add.do" method="post" enctype="multipart/form-data"> <table cellspacing="1" cellpadding="2" width="100%" border="0" class="pn-ftable"> <tbody> <tr> <td width="20%" class="pn-flabel pn-flabel-h"> <span class="pn-frequired">*</span> 品牌名称:</td><td width="80%" class="pn-fcontent"> <input type="text" class="required" name="name" maxlength="100"/> </td> </tr> <tr> <td width="20%" class="pn-flabel pn-flabel-h"> <span class="pn-frequired">*</span> 上传商品图片(90x150尺寸):</td> <td width="80%" class="pn-fcontent"> 注:该尺寸图片必须为90x150。 </td> </tr> <tr> <td width="20%" class="pn-flabel pn-flabel-h"></td> <td width="80%" class="pn-fcontent"> <img width="100" height="100" id="allImgUrl"/> <input type="hidden" name="imgUrl" id="path"/> 保存到数据库中，贮存在对象里 <input type="file" onchange="uploadPic()" name="pic"/> 鼠标点击选中发生的事件，就是已经保存图片了 </td> </tr> <tr> <td width="20%" class="pn-flabel pn-flabel-h"> 品牌描述:</td><td width="80%" class="pn-fcontent"> <input type="text" class="required" name="description" maxlength="80" size="60"/> </td> </tr> <tr> <td width="20%" class="pn-flabel pn-flabel-h"> 排序:</td><td width="80%" class="pn-fcontent"> <input type="text" class="required" name="sort" maxlength="80"/> </td> </tr> <tr> <td width="20%" class="pn-flabel pn-flabel-h"> 是否可用:</td><td width="80%" class="pn-fcontent"> <input type="radio" name="isDisplay" value="1" checked="checked"/>可用 <input type="radio" name="isDisplay" value="0"/>不可用 </td> </tr> </tbody> <tbody> <tr> <td class="pn-fbutton" colspan="2"> <input type="submit" class="submit" value="提交"/> <input type="reset" class="reset" value="重置"/> </td> </tr> </tbody> </table> </form> </div> </body> </html>
4.controller层方法
package cn.itcast.core.controller.admin; import java.io.IOException; import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Random; import javax.servlet.http.HttpServletResponse; import org.apache.commons.io.FilenameUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; import cn.itcast.common.web.ResponseUtils; import cn.itcast.core.web.Constants; import com.alibaba.fastjson.JSONObject; import com.sun.jersey.api.client.Client; import com.sun.jersey.api.client.WebResource; /** * 上传图片 * 商品 * 品牌 * 商品介绍Fck * @author lx * */ @Controller public class UploadController { //上传图片 @RequestMapping(value = "/upload/uploadPic.do") //异步，所以不需要返回值 public void uploadPic(@RequestParam(required = false) MultipartFile pic,HttpServletResponse response){ false：不插图片也不会报错 //扩展名 String ext = FilenameUtils.getExtension(pic.getOriginalFilename()); 通过引入apache公司的jar包，来调用方法 //图片名称生成策略 DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS"); 避免重名覆盖 //图片名称一部分 String format = df.format(new Date()); //随机三位数 Random r = new Random(); // n 1000 0-999 99 for(int i=0 ; i<3 ;i++){ format += r.nextInt(10); } //实例化一个Jersey Client client = new Client(); 相当于一个客户端向服务器发送图片 //保存数据库 String path = "upload/" + format + "." + ext; //另一台服务器的请求路径是? String url = Constants.IMAGE_URL + path; 定义一个常量，后期修改方便 //设置请求路径 WebResource resource = client.resource(url); //发送开始 POST GET PUT try { resource.put(String.class, pic.getBytes()); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } //返回二个路径 JSONObject jo = new JSONObject(); jo.put("url", url); jo.put("path",path); ResponseUtils.renderJson(response, jo.toString()); 封装成一个工具类
} }
5.返回其他类型的工具类
package cn.itcast.common.web; import java.io.IOException; import javax.servlet.http.HttpServletResponse; /** * 异步返回各种格式 * json * xml * text * @author lx * */ public class ResponseUtils { //发送内容 public static void render(HttpServletResponse response,String contentType,String text){ response.setContentType(contentType); try { response.getWriter().write(text); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } //发送的是JSON public static void renderJson(HttpServletResponse response,String text){ render(response, "application/json;charset=UTF-8", text); } //发送xml public static void renderXml(HttpServletResponse response,String text){ render(response, "text/xml;charset=UTF-8", text); } //发送text public static void renderText(HttpServletResponse response,String text){ render(response, "text/plain;charset=UTF-8", text); } }
6.图片服务器常量
package cn.itcast.core.web;
/**
* 业务常量
* @author lx
*
*/
public interface Constants {
/**
* 图片服务器
*/
public static final String IMAGE_URL = "http://localhost:8080/cn/";
}
7.显示列表页面图片，在实体类中定义一个方法
package cn.itcast.core.bean.product;
import cn.itcast.core.web.Constants;
/**
* 品牌
* @author lx
*
*/
public class Brand {
private Integer id;
private String name;
private String description;
private String imgUrl;
private Integer sort;
private Integer isDisplay;
//获取全路径
public String getAllUrl(){
return Constants.IMAGE_URL + imgUrl;
}
//页号
private Integer pageNo = 1;
//开始行
private Integer startRow;
//每页数
private Integer pageSize = 10;
public Integer getStartRow() {
return startRow;
}
public void setStartRow(Integer startRow) {
this.startRow = startRow;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
//计算一次开始行
this.startRow = (pageNo - 1)*pageSize;
this.pageSize = pageSize;
}
public Integer getPageNo() {
return pageNo;
}
public void setPageNo(Integer pageNo) {
//计算一次开始行
this.startRow = (pageNo - 1)*pageSize;
this.pageNo = pageNo;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getImgUrl() {
return imgUrl;
}
public void setImgUrl(String imgUrl) {
this.imgUrl = imgUrl;
}
public Integer getSort() {
return sort;
}
public void setSort(Integer sort) {
this.sort = sort;
}
public Integer getIsDisplay() {
return isDisplay;
}
public void setIsDisplay(Integer isDisplay) {
this.isDisplay = isDisplay;
}
@Override
public String toString() {
return "Brand [id=" + id + ", name=" + name + ", description="
+ description + ", imgUrl=" + imgUrl + ", sort=" + sort
+ ", isDisplay=" + isDisplay + "]";
}
}
8 在list页面显示
9.最后要在要接收的服务器（可以是本地，或者另一台tomcat）修改配置文件
