1.圖片服務器Tomcat的設置 tomcat/conf/web.xml中內容更改,將tomcat設置爲可以讀寫
<servlet> <servlet-name>default</servlet-name> <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>0</param-value> </init-param> <init-param> <param-name>readonly</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>listings</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet>
2.前臺頁面提供上傳圖片的表單和ajax異步的邏輯
<form id="jvForm" action="add.do" method="post" enctype="multipart/form-data"> …… <img src="" id="allImgUrl"/> <input type="hidden" name="imgUrl" id="imgUrl"/> <input type="file" name="uploadPic" onchange="uploadPic()"/> </form>
<script type="text/javascript" scr="/res/common/js/jquery.form.js"></script> <script type="text/javascript"> //採用jquery.form.js異步上傳圖片,並結合<form>表單 function uploadFic(){ var options = { //請求路徑 url = "/upload/uploadPic.do", dataType = "json", type = "post", beforeSubmit : function(formData,jqForm,options){ //判斷是否爲圖片 var f = jqForm[0];//將jqForm轉成DOM對象 var v = f.logoPic.value;//獲取DOM對象中name爲logoPic的值 //獲取擴展名,並轉成小寫 var ext = v.substring(v.length-3).toLowerCase(); //比對擴展名 jpg gif bmp png if(ext != "jpg" && ext != "gif" && ext != "bmp" && ext != "png"){ alert("只允許上傳圖片!"); return false; } //校驗提交的表單 return true; }, success : function(data){ //處理結果 //將相對路徑設置給隱藏域中,提交時用 $("#imgUrl").val(data.path); //將全路徑設置給img標籤,顯示圖片用 $("#allImgUrl).attr("src",data.url); } } $("#jvForm").ajaxSubmit(options); } </script>
3.springmvc-back.xml配置圖片轉換器
<!-- 上傳圖片轉換器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 設置上傳文件的最大尺寸爲1MB --> <property name="maxUploadSize" value="1048576"/> </bean>
4.UploadController上傳圖片到另一臺服務器
需要的jar包如下
commons-io-1.3.2.jar
jersey-client-1.18.1.jar
jersey-core-1.18.1.jar
import java.text.SimpleDateFormat; import java.util.Date; import java.util.Random; import javax.servlet.http.HttpServletResponse; import org.apache.commons.io.FilenameUtils; import org.json.JSONObject; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; import cn.itcast.core.web.Constants; import cn.itcast.core.web.ResponseUtils; import com.sun.jersey.api.client.Client; import com.sun.jersey.api.client.WebResource; @Controller public class UploadController { @RequestMapping(value="/upload/uploadPic.do") public void uploadPic(@RequestParam(required=false)MultipartFile pic,HttpServletResponse response){ //@RequestParam(required=false)MultipartFile pic 接收前臺表單name=pic文件,required=false表示文件可以爲空 //response 表示springmvc處理異步上傳的返回值 //設置圖片到指定的服務器 //文件擴展名 String ext = FilenameUtils.getExtension(pic.getOriginalFilename()); //圖片名稱=日期+隨機數+圖片原始名 String format = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()); Random r = new Random(); for(int i=0;i<3;i++){ format+=r.nextInt(10); } //Jersey工具包發圖片到指定服務器 //實例化Jersey Client client = new Client(); //保存數據庫的path String path = "/upload/"+format+"."+ext; //圖片在圖片服務器上的請求地址 String url = Constants.IMAGE_URL+path; //jersey設置請求路徑 WebResource resource = client.resource(url); //jersey寫數據 try { resource.put(String.class,pic.getBytes()); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } //ajax回調函數接收的數據 JSONObject jo = new JSONObject(); jo.put("url", url); jo.put("path", path); ResponseUtils.renderJson(response, jo.toString()); }
5.ajax回調數據格式
/** * 異步放回數據格式處理 * @author pengya * */ public class ResponseUtils { //發送內容 public static void render(HttpServletResponse response,String contentType,String text){ response.setContentType(contentType); try { response.getWriter().write(text); } catch (IOException e) { e.printStackTrace(); } } //發送json public static void renderJson(HttpServletResponse response,String text){ render(response,"application/json;charset=utf-8",text); } //發送xml public static void renderXml(HttpServletResponse response,String text){ render(response, "text/xml;charset=UTF-8", text); } //發送text public static void renderText(HttpServletResponse response,String text){ render(response, "text/plain;charset=UTF-8", text); } }