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

心已赠人 2022-06-06 08:46 248阅读 0赞

jar包  
![jar包][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>商品图片 *</td>
 <td>
 
 <label></label> <img id='imgSize1ImgSrc' src='${picPath }${item.pic }' height="100" width="100" /> 
 图片不能超过2MB
 <input type='file' id='imgSize1File' name='imgSize1File' class="file" onchange='submitImgSize1Upload()'/>
 <input type='hidden' id='imgSize1' name='pic'/>
 
 </td>
 
 
 js脚本(上传文件类型/大小控制)
 function submitImgSize1Upload() {
 var filePath = $("#imgSize1File").val(); 
 if(filePath == ""){
 $("#imgSize1File").after("商品图片不能为空!");
 }else{
 var fileType = filePath.substring(filePath.lastIndexOf(".")+1).toLowerCase();
 $(".messageImg").remove();
 if("jpg"!=fileType && "png"!=fileType){ 
 $("#imgSize1File").after("请上传JPG,PNG格式的图片");
 $("#add").attr("disabled","disabled");
 }else if(document.getElementById("imgSize1File").files[0].size / 1024 > 2048){
 $("#imgSize1File").after("图片不能超过2MB");
 $("#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" />

[jar]: /images/20220606/1e203b197f8c4ca2846d7cbb621e208a.png