ssm异步上传图片
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）修改配置文件
ssm异步上传图片的更多相关文章
- Jquery实现异步上传图片
利用jQuery的ajax函数就可以实现异步上传图片了.一开始我是想在处理程序中,直接用context.Request.Files来获取页面中的input file,但是不知道为什么一次获取不了.网上 ...
- 异步上传图片，光用jquery不行，得用jquery.form.js插件
异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...
- 利用KindEditor的uploadbutton实现异步上传图片
利用KindEditor的uploadbutton实现异步上传图片 异步上传图片最经常使用的方法就是图片在iframe中上传.这样仅仅须要刷新iframe.而不用刷新整个页面. KindEdi ...
- php结合jquery异步上传图片（ajaxSubmit）
php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...
- C# 异步上传图片案例
好久没写博客了,都感觉自己快堕落了!今天随性写一篇关于异步上传图片的程序及插件! 说是程序及插件,其实程序占大头,所谓的插件只是两个JS.分别为:jquery.html5upload.js 和 jqu ...
- 使用Ajax异步上传图片的方法(html,javascript,php)
前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...
- Ajax实现异步上传图片
要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- MVC异步上传图片到本地/服务器
这两天朋友问我,有没有异步上传图片到本地/服务器这种demo,他有用, 我就想,好吧, 那刚好周末了,整理一套出来. 主要用到的是jquery uploadify 这个juqery的插件 ,可以无刷新 ...
随机推荐
- xUtils中用DbUtils，ViewUtils的用法
一.有关xUtils的简介 xUtils 包含了很多实用的android工具.xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10 ...
- mosquitto ---mosquitto-auth-plug
https://github.com/jpmens/mosquitto-auth-plug This is a plugin to authenticate and authorize Mosquit ...
- JSON对象和JSON字符串以及JSON.parse 函数的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Mybatis 中延时加载
1 为了处理N+1 问题,Mybatis 引入了延时加载功能,意义是一开始并不取出关联数据,只有当使用时,才发送sql语句去取. mybatis中两个全局设置 lazyLoadingEnabled 和 ...
- mysql的join操作
一．Join语法概述 join 用于多表中字段之间的联系,语法如下: ... FROM table1 INNER|LEFT|RIGHT JOIN table2 ON conditiona table1 ...
- Flume 中文入门手冊
原文:https://cwiki.apache.org/confluence/display/FLUME/Getting+Started 什么是 Flume NG? Flume NG 旨在比起 Flu ...
- php的ord函数——解决中文字符截断问题
php的ord函数——解决中文字符截断问题 分类: PHP2014-11-26 12:11 1033人阅读 评论(0) 收藏 举报 utf8字符截取 函数是这样定义的: int ord ( strin ...
- 不同classloader装载的类不能互相访问?
一,有两个术语,一个叫“定义类加载器”,一个叫“初始类加载器”. 比如有如下的类加载器结构: bootstrap ExtClassloader AppClassloader -自定 ...
- [linux]signal函数不起作用
#include "apue.h" #include <sys/wait.h> static void sig_int(int); /* our signal-catc ...
- SharpDevelop浅析_4_TextEditor_自动完成、代码折叠……
SharpDevelop浅析_4_TextEditor_自动完成.代码折叠…… SharpDevelop浅析_4_TextEditor_自动完成.代码折叠…… Parser及其应用: Code Com ...