开发实用技术(个人备忘)-图片上传回显

tech2026-02-01  9

1.后台 

/** * 上传图片(只是上传到某目录,数据库部分自己写) * @param req * @return */ @RequestMapping(value="/uploadFiles", method=RequestMethod.POST) public @ResponseBody String uploadFiles(HttpServletRequest req, HttpServletResponse resp, MultipartFile file){ if(file.isEmpty()){ return "false"; } long size = file.getSize(); String name = CodeSecurityUtil.validisOkFileName(file.getOriginalFilename()); if(StringUtils.isBlank(name)||size==0){ return "false"; } String flix = name.substring(name.lastIndexOf("."),name.length()); InputStream inputS = null; OutputStream outP = null; //获取当前web文件路径 // String web_path = req.getSession().getServletContext().getRealPath("/"); // System.out.println("====="+web_path); // String upload_path = web_path + "upload_imgs"; //现在使用配置的固定目录 String upload_path = PropertiesUtils.getString("PIC_UPLOAD_PATH", "config.properties"); File uploadFile = new File(upload_path); //判断文件否是存在,不存在则创建 if (!uploadFile.exists()){ uploadFile.mkdirs(); } String curTime = String.valueOf(System.currentTimeMillis()); try { inputS = file.getInputStream(); outP = new FileOutputStream(new File(upload_path+"/"+name)); int len = 0; byte[] buffer = new byte[1024 * 10]; while ((len = inputS.read(buffer)) != -1){ outP.write(buffer, 0, len); } outP.flush(); } catch (IOException e) { e.printStackTrace(); return "false"; } finally { if (inputS != null) { try { inputS.close(); } catch (IOException e) { e.printStackTrace(); } } if (outP != null) { try { outP.close(); } catch (IOException e) { e.printStackTrace(); } } } String sourceName = upload_path+"/"+name; String destName = upload_path+"/"+curTime+".jpg"; try { PicUtil.convertpath(sourceName,destName); if(size>100*1024){ PicUtil.compressImage(destName,0.75f); } } catch (Exception e) { e.printStackTrace(); return "false"; } return curTime+".jpg"; } //回显 @RequestMapping(value="/readImg/{imgName}", method=RequestMethod.GET) public @ResponseBody String readImg(@PathVariable String imgName, HttpServletRequest req, HttpServletResponse resp){ FileInputStream ips = null; OutputStream out = null; String upload_path = PropertiesUtils.getString("PIC_UPLOAD_PATH", "config.properties"); String imgPath = upload_path + imgName+".jpg"; try { ips = new FileInputStream(new File(imgPath)); resp.setContentType("multipart/form-data"); out = resp.getOutputStream(); int len = 0; byte[] buffer = new byte[1024 * 10]; while ((len = ips.read(buffer)) != -1){ out.write(buffer, 0, len); } out.flush(); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); }finally{ if (null != out){ try { out.close(); } catch (IOException e) { e.printStackTrace(); } } if (null != ips){ try { ips.close(); } catch (IOException e) { e.printStackTrace(); } } } return null; }

2.前台:

//初始化时,加载已经上传的照片(这部分改为ajax就行) var url = tdxxcGLS.mappath("~/rest/tdxxcGLS/queryImage"); var _restClient = new mx.rpc.RESTClient(); var getResult = _restClient.getSync(url, { "sjxh" : _formData.SJXH, "type":type }); if (getResult.successful) { $.each(getResult.resultValue.items, function(index, item) { var src = web_path+"/rest/tdxxcGLS/readImg/" + item['NAME']+"."+item['GS']; html+=" <div class='imgDiv' style='width:350px; height:170px;float:left' ondblclick='trouble_event.imgbig(this);'>" + "<img title='双击可查看大图' src='"+src+"' width='100%' height='100%' id='imgsrc' Style='padding:2px'/>" + " <a href='#'>" + "<img name='"+ item['NAME']+"."+item['GS']+"' onclick='trouble_event.deleteImg(this);' src='' class='delete' />"+ "</a>" + "</div>"; }) } html+=" </div><!-- 放大遮罩层 --><div id='bigimg' onclick='trouble_event.closeimg();'></div>";

 具体前端代码可参考:开发实用技术(个人备忘)-上传图片(前台)

 

最新回复(0)