跨服务器上传-图片服务器-图片回显-列表回显

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;">&nbsp;*</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" />