采用jquery.form.js异步上传图片,并结合<form>表单
<script type="text/javascript"> //采用jquery.form.js异步上传图片,并结合<form>表单 function uploadPicture() { var options = { //请求路径 url : "/upload/uploadPic.do", dataType : "json", type : "post", success : function(data) { //处理结果 //将相对路径设置给隐藏域中,提交时用 $("#imgUrl").val(data.path); //将全路径设置给img标签,显示图片用 $("#allImgUrl").attr("src", data.url); } } $("#jvForm").ajaxSubmit(options); } </script> <tr> <td width="20%" class="pn-flabel pn-flabel-h"></td> <td width="80%" class="pn-fcontent"> <img width="100" height="100" id="allImgUrl" /> <!-- 图片存在数据库的路径 --> <input type="hidden" id="imgUrl" name="imgUrl"></input> <input type="file" onchange="uploadPicture()" name="uploadPic" /></td> </tr>
一定要在form表单中填写enctype="multipart/form-data"
<form id="jvForm" action="/brand/add.do" method="post" enctype="multipart/form-data"> </form>
在springmvc.xml文件中添加文件软件器
<!-- 图片转换器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="10485760"></property> </bean>
编写文件上传UploadController.java
1 package cn.lzc.code.controller.admin; 2 3 import java.io.IOException; 4 import java.text.DateFormat; 5 import java.text.SimpleDateFormat; 6 import java.util.Date; 7 import java.util.Random; 8 9 import javax.servlet.http.HttpServletResponse; 10 11 import org.apache.commons.io.FilenameUtils; 12 import org.json.JSONObject; 13 import org.springframework.stereotype.Controller; 14 import org.springframework.web.bind.annotation.RequestMapping; 15 import org.springframework.web.bind.annotation.RequestMethod; 16 import org.springframework.web.bind.annotation.RequestParam; 17 import org.springframework.web.multipart.MultipartFile; 18 19 import com.sun.jersey.api.client.Client; 20 import com.sun.jersey.api.client.ClientHandlerException; 21 import com.sun.jersey.api.client.UniformInterfaceException; 22 import com.sun.jersey.api.client.WebResource; 23 24 import cn.lzc.code.web.Constants; 25 import cn.lzc.common.web.ResponseUtils; 26 27 /** 28 * 上传文件管理Controller 29 * 30 * @author admin 31 * 32 */ 33 @Controller 34 public class UploadController { 35 36 /** 37 * 异步上传图片 38 * 39 * @param uploadFile 40 * @param response 41 */ 42 @RequestMapping(value="/upload/uploadPic.do",method=RequestMethod.POST) 43 public void uploadBrandPic(@RequestParam(required = false) MultipartFile uploadPic, HttpServletResponse response) { 44 // 图片名称生成策略---采用时间格式(精确到毫秒)并追加随机3位(10以内)数字 45 // 精确到毫秒 46 DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS"); 47 String picName = df.format(new Date()); 48 //随机再生成3位10以内的数 49 Random r=new Random(); 50 for (int i = 0; i < 3; i++) { 51 picName+=r.nextInt(10); 52 } 53 //获取扩展名 54 String originalFilename = uploadPic.getOriginalFilename(); 55 String ext = FilenameUtils.getExtension(originalFilename); 56 //相对路径 57 String path="upload/"+picName+"."+ext; 58 //全路径 59 String url="http://localhost:8088/image-web/"+path; 60 61 //jersey发送另一台Tomcat(可读写) 62 // 实例化Jersey 63 Client client=new Client(); 64 //想要发送到的服务器地址,记住,必须设置tomcat服务器的权限,不然无法上传到tomcat 65 //设置请求路径 66 WebResource resource = client.resource(url); 67 try { 68 //发送开始put 69 resource.put(String.class, uploadPic.getBytes()); 70 } catch (UniformInterfaceException e) { 71 // TODO Auto-generated catch block 72 e.printStackTrace(); 73 } catch (ClientHandlerException e) { 74 // TODO Auto-generated catch block 75 e.printStackTrace(); 76 } catch (IOException e) { 77 // TODO Auto-generated catch block 78 e.printStackTrace(); 79 } 80 //返回json数据给页面,(包括url回显路径,Path保存数据库的路径) 81 JSONObject jo=new JSONObject(); 82 jo.put("path", path); 83 jo.put("url", url); 84 //返回数据给页面 85 ResponseUtils.renderJson(response, jo.toString()); 86 } 87 }
写一个RequestUtils.java工具类,用来响应相应的数据到前台页面
1 package cn.lzc.common.web; 2 3 import java.io.IOException; 4 5 import javax.servlet.http.HttpServletResponse; 6 7 /** 8 * Response帮助类 支持JSON XML Text 9 * 10 * @author admin 11 * 12 */ 13 14 public class ResponseUtils { 15 // 发送Json 16 public static void renderJson(HttpServletResponse response, String text) { 17 rend(response, "application/json;charset=UTF-8", text); 18 } 19 20 // 发送xml 21 public static void renderXml(HttpServletResponse response, String text) { 22 rend(response, "text/xml;charset=UTF-8", text); 23 } 24 25 // 发送text 26 public static void renderText(HttpServletResponse response, String text) { 27 rend(response, "text/plain;charset=UTF-8", text); 28 } 29 30 // 发送 31 public static void rend(HttpServletResponse response, String contextType, String text) { 32 // 设置传输类型 33 response.setContentType(contextType); 34 // 发送 35 try { 36 response.getWriter().write(text); 37 } catch (IOException e) { 38 // TODO Auto-generated catch block 39 e.printStackTrace(); 40 } 41 } 42 }
原文地址:https://www.cnblogs.com/limn/p/9219213.html
时间: 2024-11-11 13:52:58