springmvc+jersey实现图片跨服务器上传到并回显

110 篇文章 6 订阅
36 篇文章 1 订阅

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分。。。也不知道结果如何。。觉得有个公司要我去实习就是好的 ,,,哈哈 想锻炼一下自己了

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值