使用ssm实现图片上传

图片上传

使用的服务器是tomcat
1.导入jar包
commons-fileupload.jar
commons-io-1.3.2.jar
跨服务器使用的jar
jersey-client-1.18.1.jar
jersey-core-1.18.1.jar

文件上传需要表单提交
导入js jquery.form.js，和jquery1.8.3
jQuery.form.js是一个form插件，支持ajax表单提交和ajax文件上传

跨服务器上传
1.复制tomcat文件夹，将该tomcat中的端口号等修改，保证不予应用的服务器端口冲突
2.修改该tomcat的web.xml文件，在<servlet>中添加<init-param>设置readonly为false
3.在表单提交页面中，导入js jquery.form.js，和jquery1.8.3
<form id="fm" action="${pageContext.request.contextPath}/user/addUser.do" method="post" >
<p>用户名：<input name="userCode"/></p>
<p>姓名：<input name="userName"/></p>
<p>密码：<input name="userPassword" type="password"/></p>
<p>性别：<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="2" checked/>女</p>
<p>
请上传头像：
<img id='imgSrc' src='' alt="" height="100" width="100"/>
<input type="file" id='imgFile' name='imgFile' onchange="fileShow();"/>
<input id="relativeSrc" type="hidden" name="filepath"/>
<br/>
</p>
<p><input type="submit" value="添加"/></p>
</form>
4.在选择文件的时候就请求ajax，对图片进行回显
<script type="text/javascript">
function fileShow(){
//请求ajax 将图片上传到文件服务器
$("#fm").ajaxSubmit({
type:"POST",
url:"${pageContext.request.contextPath}/upload/uploadImage.do",
data:{
fileName:"imgFile"
},
success:function(resData){
$("#imgSrc").attr("src",resData.fullPath);
$("#relativeSrc").val(resData.relativePath);
},
dataType:"json"
});
}
</script>
5.ajax请求的是controller
@Controller
@RequestMapping("/upload")
public class UploadController {
@RequestMapping("uploadImage")
public @ResponseBody Map<String,String> uploadImage(HttpServletRequest request,String fileName){
//将普通请求转换为多部件请求方式
MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
//根据文件名进行获取文件对象
CommonsMultipartFile mf = (CommonsMultipartFile) mr.getFile(fileName);
//将文件对象转换为字节
byte[] fileBytes = mf.getBytes();
//获取文件名
String newFileName = "";
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
newFileName = sdf.format(new Date());
//取三位数的随机数
Random rd = new Random();
for(int i=0;i<3;i++){
newFileName = newFileName + rd.nextInt(10);
}
System.out.println("随机的文件名为："+newFileName);
//获取文件全名称
String originalFilename = mf.getOriginalFilename();
System.out.println("文件全名称:"+originalFilename);
//获取后缀
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
System.out.println("上传文件的后缀："+suffix);
//开始上传
//创建jesy服务器，进行跨服务器上传
Client client = Client.create();
//绝对路径
String fullPath = "http://127.0.0.1:8001/pictureUpload/upload/"+newFileName+suffix;
WebResource wr = client.resource(fullPath);
//相对路径
String relativePath = "/upload/"+newFileName+suffix;
//上传
wr.put(String.class, fileBytes);
Map<String,String> map = new HashMap<String, String>();
map.put("fullPath", fullPath);
map.put("relativePath", relativePath);

return map;
}
6.新建一个web项目，在webroot下新建一个存放文件的文件夹，部署到复制的tomcat服务器上
在步骤5中的以下语句：
String fullPath = "http://127.0.0.1:8001/pictureUpload/upload/"+newFileName+suffix;
双引号部分的路径就是此处新建的web项目，文件上传到该位置