springmvc+jersey实现图片跨服务器上传到并回显
2017-06-14 20:19
756 查看
需求
所需jar包
springmvcxml开启文件上传
简单上传界面
ajax提交图片表单
UploadController
测试
struts2都支持文件的上传,更好的springmvc当然也支持了~
这里就来用一个小例子来实现
使用Ajax可以实现页面不刷新图片回显。
文件上传:com.springsource.org.apache.commons.fileupload-1.2.0.jar
文件的读写:com.springsource.org.apache.commons.io-1.4.0.jar
由于是跨服务器上传,这里是通过jersey实现的:
jersey-client-1.18.jar
jersey-core-1.18.jar
使用jquery.form.js 异步提交form插件。
ajax提交form表单
由于图片需要回显,所以服务器需要返回图片的绝对路径
由于上传的文件是流类型直接使用request对象无法获得.需要把request对象强转为多部件请求对象MultipartHttpServletRequest ,然后就可以通过文件名称来获得。至于为何可以强转为多部件请求对象MultipartHttpServletRequest ,是因为我们是使用ajax提交表单,根本没使用enctype.
由于文件名可能会出现重名,所以我使用当前时间+5个随机数作为新图片的文件名称
然后就是使用jesey上传图片到远程服务器了。这时候需要在远程服务器的conf/web.xml中配置一个初始变量
![](https://img-blog.csdn.net/20170614201040344?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3UyMDE0NTEwNDAwOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
最后就是ajax返回的图片的绝对路径了~
![](https://img-blog.csdn.net/20170614201550819?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3UyMDE0NTEwNDAwOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
前几天在拉勾网投了java实习生的简历,总共来了四个电话,,前三个都是问了一些无关痛痒的东西,也没说面试的事情。估计是培训吧,今天有一个公司对我进行了电话面试,由于还没看过面试题,觉得如果是100分制的能得65分。。。也不知道结果如何。。觉得有个公司要我去实习就是好的 ,,,哈哈 想锻炼一下自己了
所需jar包
springmvcxml开启文件上传
简单上传界面
ajax提交图片表单
UploadController
测试
struts2都支持文件的上传,更好的springmvc当然也支持了~
这里就来用一个小例子来实现
需求
上传图片,图片里面回显。使用Ajax可以实现页面不刷新图片回显。
所需jar包
由于此案例是文件的上传,所以除了springmvc本来的jar包外还需要:文件上传:com.springsource.org.apache.commons.fileupload-1.2.0.jar
文件的读写:com.springsource.org.apache.commons.io-1.4.0.jar
由于是跨服务器上传,这里是通过jersey实现的:
jersey-client-1.18.jar
jersey-core-1.18.jar
springmvc.xml开启文件上传
Springmvc配置文件配置支持文件上传类,开启即可:<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!--最大支持3M --> <property name="maxUploadSize" value="#{3*1024*1024}"></property> </bean>
简单上传界面
form表单里一个图片标签,一个文件选择按钮<form action="" id="imgform"> <img id="img" alt="头像" src="" width="250px" height="250px" > <input type="file" id="uploadimg" name="uploadimg"> </form>
ajax提交图片表单
由于我们要实现图片的回显,使用ajax是毋容置疑的,可是通常我们使用ajax发送的数据只能是json或者字符串类型。图片类型的文件应该怎么发送呢?以前我们是怎么上传图片的呢?聪明的你一定想到了,是的form表单。以前我们是通过form表单来上传文件,ajax能不能用来提交表单呢?答案是肯定的。使用jquery.form.js 异步提交form插件。
ajax提交form表单
由于图片需要回显,所以服务器需要返回图片的绝对路径
$(function(){ $("#uploadimg").change(function(){ var option={ url:"${pageContext.request.contextPath}/upload/uploadImg.do", type:"post", dataType:"text", data:{fileName:"uploadimg"}, success:function(data){ //把json格式的字符串转换成json对象 var dataObj=$.parseJSON(data); //返回服务器的图片路径,并把图片的路径设置给img标签 $("#img").attr("src",dataObj.fullPath); } }; //上传表单 $("#imgform").ajaxSubmit(option); }); });
UploadController
由于要获得上传的文件,所需参数要有request对象和文件的名称fileName,ajax需要回显图片,需要PrintWriter由于上传的文件是流类型直接使用request对象无法获得.需要把request对象强转为多部件请求对象MultipartHttpServletRequest ,然后就可以通过文件名称来获得。至于为何可以强转为多部件请求对象MultipartHttpServletRequest ,是因为我们是使用ajax提交表单,根本没使用enctype.
由于文件名可能会出现重名,所以我使用当前时间+5个随机数作为新图片的文件名称
然后就是使用jesey上传图片到远程服务器了。这时候需要在远程服务器的conf/web.xml中配置一个初始变量
最后就是ajax返回的图片的绝对路径了~
@Controller @RequestMapping("/upload") public class UploadController { @RequestMapping("uploadImg") public void uploadImg(HttpServletRequest request,String fileName,PrintWriter pw){ //把request强转为多部件请求对象 MultipartHttpServletRequest req=(MultipartHttpServletRequest) request; //根据文件名称获得文件对象 CommonsMultipartFile img = (CommonsMultipartFile) req.getFile(fileName); //获取文件上传流 byte[] fbytes = img.getBytes(); //文件名在服务器可能有重复 String newfileName=System.currentTimeMillis()+""; Random r=new Random(); for(int i=0;i<5;i++){ newfileName+=r.nextInt(100); } //获取文件的扩展名 String originalFilename = img.getOriginalFilename(); String suffix=originalFilename.substring(originalFilename.lastIndexOf(".")); //创建jesy服务器 进行跨服务器上传 Client client=Client.create(); //把文件关联到远程服务器 WebResource resource = client.resource("http://123.123.123.123/upload/"+newfileName+suffix); //上传 resource.put(fbytes); /* * ajax回调函数所需的参数 * fullPath:图片回显所需的完整路径 */ String fullPath="http://123.123.123.123/upload/"+newfileName+suffix; String result="{\"fullPath\":\""+fullPath+"\"}"; pw.write(result); } }
测试
前几天在拉勾网投了java实习生的简历,总共来了四个电话,,前三个都是问了一些无关痛痒的东西,也没说面试的事情。估计是培训吧,今天有一个公司对我进行了电话面试,由于还没看过面试题,觉得如果是100分制的能得65分。。。也不知道结果如何。。觉得有个公司要我去实习就是好的 ,,,哈哈 想锻炼一下自己了
相关文章推荐
- maven+myeclise+springmvc+jersey+ajax实现图片跨服务器上传
- springMVC+jersey实现跨服务器文件上传
- 搭建图片服务器《四》:后台java代码springMVC+spring实现图片上传
- 使用Jersey + SpringMVC 上传图片到图片服务器
- springMVC+ Linux + VSFTPD + nginx实现文件上传至图片服务器
- MUI + Spring MVC 实现多图片上传
- AJAX+JQuery+SpringMVC实现图片上传
- springMVC+WebUploader实现多图片上传
- Ueditor1.4.3.3+springMvc+maven 实现图片上传
- SpringMVC+easyUI实现上传图片功能小例子
- ajaxfileupload.js+springMVC实现多个图片与数据同一个ajax方法上传
- Ueditor1.4.3.3+springMvc+maven 实现图片上传
- springmvc + ajaxfileupload 实现异步上传文件(图片)
- dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
- springmvc+easyui+fileupload实现图片上传
- jquery.uploadify+spring mvc实现上传图片
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(二 、上传图片服务器操作)
- 基于SpringMVC+Bootstrap实现图片异步上传进度显示
- springmvc + ajaxfileupload 实现异步上传文件(图片)
- freemarker+springMVC+ajaxfileupload实现异步图片上传(多张)