第一步：引入需要的js
<script src="/res/common/js/jquery.js" type="text/javascript"></script>
<script src="/res/common/js/jquery.form.js" type="text/javascript"></script><!----用来模拟form表单提交数据的组件--->
第二部:编写html页面
<form id="jvForm" action="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"/><!--需要提交到服务器的图片路径，因为是异步上传，所以需要带上imgurl的隐藏域-->
<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>
第三步：编写js代码模拟form表单上床图片、文件
<script type="text/javascript">
//上传图片
function uploadPic(){
//定义参数
var options = {
url : "/upload/uploadPic.do",
dataType : "json",
type : "post",
success : function(data){
//回调 二个路径
//url
//path
$("#allImgUrl").attr("src",data.url);
$("#path").val(data.path);
}
};
//jquery.form使用方式
$("#jvForm").ajaxSubmit(options);
}
</script>
第四步：在springMVC中编写后台接受上上传的图片
/**
* 上传图片
* 商品
* 品牌
* @author lx
*
*/
@Controller
public class UploadController {
//上传图片
@RequestMapping(value = "/upload/uploadPic.do")
public void uploadPic(@RequestParam(required = false) MultipartFile pic,HttpServletResponse response){
//扩展名
String ext = FilenameUtils.getExtension(pic.getOriginalFilename());
//图片名称生成策略
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把图片上传到另外一个tomcat，如果是一般保存图片，可以使用javaWEB中一般的方式，因为方法参数pic就是上传的图片或文件
//实例化一个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());
}
}
第五步：在spring-mvc.xml中配置上传文件的解析器
<!-- 上传图片 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 最大上传尺寸 B 1M -->
<property name="maxUploadSize" value="1048576"/>
</bean>