采用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 ?* 上传文件管理Controller29 ?* 30 ?* @author admin31 ?*32 ?*/33 @Controller34 public class UploadController {35 36 ????/**37 ?????* 异步上传图片38 ?????* 39 ?????* @param uploadFile40 ?????* @param response41 ?????*/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 ????????// 实例化Jersey63 ????????Client client=new Client();64 ????????//想要发送到的服务器地址,记住,必须设置tomcat服务器的权限,不然无法上传到tomcat65 ????????//设置请求路径66 ????????WebResource resource = client.resource(url);67 ????????try {68 ????????????//发送开始put69 ????????????resource.put(String.class, uploadPic.getBytes());70 ????????} catch (UniformInterfaceException e) {71 ????????????// TODO Auto-generated catch block72 ????????????e.printStackTrace();73 ????????} catch (ClientHandlerException e) {74 ????????????// TODO Auto-generated catch block75 ????????????e.printStackTrace();76 ????????} catch (IOException e) {77 ????????????// TODO Auto-generated catch block78 ????????????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 admin11 ?*12 ?*/13 14 public class ResponseUtils {15 ????// 发送Json16 ????public static void renderJson(HttpServletResponse response, String text) {17 ????????rend(response, "application/json;charset=UTF-8", text);18 ????}19 20 ????// 发送xml21 ????public static void renderXml(HttpServletResponse response, String text) {22 ????????rend(response, "text/xml;charset=UTF-8", text);23 ????}24 25 ????// 发送text26 ????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 block39 ????????????e.printStackTrace();40 ????????}41 ????}42 }
使用Jersey上传文件
原文地址:https://www.cnblogs.com/limn/p/9219213.html