jar包
配置文件
<!-- 文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"/>
<property name="maxUploadSize" value="2097152"/>
<property name="maxInMemorySize" value="4096"/>
</bean>
controller层
//上传图片
@RequestMapping("uploadPic.do")
public void uploadPic(HttpServletRequest request, String fileName,
PrintWriter out) {
// 把Request强转成多部件请求对象
MultipartHttpServletRequest mh = (MultipartHttpServletRequest) request;
// 根据文件名称获取文件对象
CommonsMultipartFile cm = (CommonsMultipartFile) mh.getFile(fileName);
// 获取文件上传流
byte[] fbytes = cm.getBytes();
// 避免文件重名
String newFileName = UUID.randomUUID().toString().replace("-", "");
// 获取文件扩展名
String originalFilename = cm.getOriginalFilename();
String suffix = originalFilename.substring(originalFilename
.lastIndexOf("."));
// 创建jesy服务器,进行跨服务器上传
Client client = Client.create();
// 把文件关联到远程服务器
WebResource resource = client.resource("http://127.0.0.1:8003/SSM-Image/upload/"+ newFileName + suffix);
// 上传
resource.put(String.class, fbytes);
// 绝对路径(http://127.0.0.1:8003/SSM-Image/upload/是图片服务器路径,要提前建好upload文件夹,并放入1个文件填充)
String fullPath = "http://127.0.0.1:8003/SSM-Image/upload/" + newFileName + suffix;
// 相对路径
String relativePath = "/upload/" + newFileName + suffix;
String result = "{\"fullPath\":\"" + fullPath
+ "\",\"relativePath\":\"" + relativePath + "\"}";
out.print(result);
}
jsp页面
<td>商品图片<span style="color: red;"> *</span></td>
<td>
<p>
<label></label> <img id='imgSize1ImgSrc' src='${picPath }${item.pic }' height="100" width="100" />
<span class='messageImg' style='color: black;'>图片不能超过2MB</span>
<input type='file' id='imgSize1File' name='imgSize1File' class="file" onchange='submitImgSize1Upload()'/>
<input type='hidden' id='imgSize1' name='pic'/>
</p>
</td>
js脚本(上传文件类型/大小控制)
function submitImgSize1Upload() {
var filePath = $("#imgSize1File").val();
if(filePath == ""){
$("#imgSize1File").after("<span class='messageImg' style='color: red'>商品图片不能为空!</span>");
}else{
var fileType = filePath.substring(filePath.lastIndexOf(".")+1).toLowerCase();
$(".messageImg").remove();
if("jpg"!=fileType && "png"!=fileType){
$("#imgSize1File").after("<span class='messageImg' style='color: red'>请上传JPG,PNG格式的图片</span>");
$("#add").attr("disabled","disabled");
}else if(document.getElementById("imgSize1File").files[0].size / 1024 > 2048){
$("#imgSize1File").after("<span class='messageImg' style='color: red'>图片不能超过2MB</span>");
$("#add").attr("disabled","disabled");
}else{
$("#add").removeAttr("disabled");
var option = {
type : 'POST',
url : '${pageContext.request.contextPath }/item/uploadPic.do',
dataType : 'text',
data : {fileName : 'imgSize1File'},
success : function(data) {
//把json格式的字符串转换成json对象
var jsonObj = $.parseJSON(data);
//返回服务器图片路径,把图片路径设置给img标签
$("#imgSize1ImgSrc").attr("src", jsonObj.fullPath);
//数据库保存相对路径
$("#imgSize1").val(jsonObj.relativePath);
}
};
$("#itemForm").ajaxSubmit(option);
}
}
}
列表回显
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="picPath" value="http://127.0.0.1:8003/SSM-Image"></c:set>
<img id='imgSize1ImgSrc' src='${picPath }${item.pic }' height="100" width="100" />