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的插件 ,可以无刷新 ...
随机推荐
- 【phpstorm】破解安装
1.使用前修改C:\windows\system32\Driver\hosts文件,将“0.0.0.0 account.jetbrains.com”添加到hosts文件中. 2. 浏览器打开 http ...
- IntelliJ IDEA 学习（一）：IntelliJ IDEA15 破解方法（已验证）
新的破解方法: 1.进到文件夹中:C:\Windows\System32\drivers\etc ,找到hosts文件,用记事本编辑 2.如果没有找到hosts文件,可在查看设置中勾选“显示隐藏的项目 ...
- AHK GUI开发示例
GUI.AHK Gui, Add, Text, gAllSearchA W120, 搜索引擎类: Gui, Add, Checkbox, gMySubroutine Checked HwndMyEdi ...
- Mysql 逻辑运算符详解
逻辑运算符又称为布尔运算符,用来确认表达式的真和假.MySQL 支持4 种逻辑运算符,如表4-3 所示. 表4-3 MySQL 中的逻辑运算符 运算符 ...
- Android Study 之 初识ButterKnife(8.5.1)及简单运用
LZ-Says:突然间不知道说什么好,祝大家编码无bug吧~ 前言 话说,Android开发的兄弟们都知道,每次初始化控件,设置对应的事件.写的那点过程多并且恶心.我们先一块回想下不堪的以前~ 那些年 ...
- Atitit.部分错误 设计模式,异常处理框架atiPartErr 的总结
Atitit.部分错误 设计模式,异常处理框架atiPartErr 的总结 1. 流程图 1 2. Java 类关系结构图片 1 3. 错误信息结构 1 4. 调用 2 4.1. 收集错误信息 3 4 ...
- Objective-C函数重载规则
是按照函数标签是否重复来判断是否为一个重载函数的.
- python 获取当前时间的用法
1.先导入库:import datetime 2.获取当前日期和时间:now_time = datetime.datetime.now() 3.格式化成我们想要的日期:strftime() 比如:“2 ...
- nyoj16矩形嵌套（第一道dp关于dag的题目）
http://acm.nyist.net/JudgeOnline/problem.php?pid=16 题意:有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c, ...
- Bootstrap学习笔记（4）--导航栏
相关类: nav, nav-pills, nav-tags, nav-stacked ul里使用,导航格胶囊,方片外观,堆叠外观 navbar, navbar-header, navbar-brand ...