異步上傳圖片到另外一台服務器

通過一個SpringMVC的案例加以說明。

1.打開按鈕是什么事件（前端頁面）

<form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data">
　　　<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" name="" id="path"/>
                <input type="file" onchange="uploadPic()" name="pic"/>
          </td>
     </tr>
</form>

enctype不能丟。

 

引入相關庫：

<script src="/sport/res/common/js/jquery.js" type="text/javascript"></script>
<script src="/sport/res/common/js/jquery.ext.js" type="text/javascript"></script>
<script src="/sport/res/common/js/jquery.form.js" type="text/javascript"></script>

2.異步提交ajax是怎么把圖片上傳到后台服務器的（JS代碼）

<script type="text/javascript">
    //上傳圖片
    function uploadPic(){
        //定義參數
        var options = {
            url:"/sport/upload/uploadPic.do",
            type:"post",
            dataType:"json",
            success:function(data){
                //回調兩個路徑
                //url
                $("#allImgUrl").attr("src", data.url);
                //path
                $("#path").val(data.path);
            }
        };
        //jquery.form使用方式
        $("#jvForm").ajaxSubmit(options);
    }
</script>

3.配置springmvc支持上傳圖片功能

<!-- 上傳圖片 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
     <!-- 最大上傳尺寸   B 1M -->
     <property name="maxUploadSize"  value="1048576"/>
</bean>

4.搭建一個圖片服務器

復制一份tomcat，在tomcat/conf/web.xml中內容如下更改，使其可讀寫。

<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>

在tomcat/conf/server.xml進行3個端口的修改。

在這里可能會遇到第二台修改端口不生效的情況，建議參看另一篇博客：http://www.cnblogs.com/DarrenChan/p/6889990.html

5.發送此圖片到另外一台服務器

利用jersey進行發送。首先我們看一下jersey的一個demo。

程序用到3個jar包，如下：

在這里，我把我本地的圖片發送到了第二台tomcat上。然后我可以直接通過網址訪問該圖片，如下：

同理，在web項目中，我們寫一個Controller，在寫之前我先把需要的工具類寫一個，利用response發送不同類型的數據。

package cn.darrenchan.common.web;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

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);
    }
}

 

重點在於Controller。

package cn.darrenchan.core.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.UUID;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FileUtils;
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 com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.ClientHandlerException;
import com.sun.jersey.api.client.UniformInterfaceException;
import com.sun.jersey.api.client.WebResource;

import cn.darrenchan.common.web.ResponseUtils;

/**
 * 上傳圖片
 * 
 * @author chenchi
 *
 */
@Controller
public class UploadController {
    // 上傳圖片，false表示不上傳也可以不報錯
    @RequestMapping(value = "/upload/uploadPic.do")
    public void uploadPic(@RequestParam(required = false) MultipartFile pic, HttpServletResponse response) {

        // 圖片名稱生成策略
        UUID uuid = UUID.randomUUID();
        // 獲取圖片的擴展名
        String extension = FilenameUtils.getExtension(pic.getOriginalFilename());

        // 實例化一個jersey
        Client client = new Client();
        // 保存到數據庫的path
        String path = "upload/" + uuid + "." + extension;
        // 另一台tomcat的URL
        String url = "http://localhost:8088/img-web/" + path;
        // 設置請求路徑
        WebResource resource = client.resource(url);

        // 發送開始post get put（基於put提交）
        try {
            resource.put(String.class, pic.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        //返回兩個路徑
        JSONObject jo = new JSONObject();
        jo.put("url", url);
        jo.put("path", path);
        
        ResponseUtils.renderJson(response, jo.toString());
        
        System.out.println(pic.getOriginalFilename());// afsdfdsfsd.jpg
        System.out.println(111);
    }
}

6.將path路徑保存到數據庫中

 

補充：

1.

<input class="add" type="button" value="添加"
                onclick="javascript:window.location.href='/sport/brand/toAdd.do'" />

2.select的寫法

<select name="isDisplay">
     <option value="1" <c:if test="${isDisplay == 1 }">selected="selected"</c:if>>是</option>
     <option value="0" <c:if test="${isDisplay == 0 }">selected="selected"</c:if>>不是</option>
</select> 

3.EL表達式中的三元運算符

${entry.isDisplay == 0 ? '不是':'是' }

4.jsp中獲取項目名稱

action="${pageContext.request.contextPath}/brand/edit.do"

 

如果報錯，就將jsp-api.jar和servlet-api.jar 一起添加到項目中，這兩個jar包在tomcat的lib文件夾下可找到。

5.jsp模板

<%@page pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>登錄</title>
</head>
<body>
    <h1>login successfully!</h1>
    <h1>${message}</h1>
    <h1>${username}</h1>
    <h1>${password }</h1>
</body>
</html>

6. 利用<a>標簽做刪除

<a class="pn-opt"
   onclick="if(!confirm('您確定刪除嗎？')) {return false;} window.location.href='/sport/brand/delete.do?id=${entry.id }&name=${name}&isDisplay=${isDisplay}'"
   href="javascript:void(0)">刪除</a>

 7.傳統JSP寫法

<% if (session.getAttribute("userName") != null)
{%>
    歡迎: <%= session.getAttribute("userName") %>
    <a href = "login.jsp">注銷</a>
    <br/>
    <% }
else
{ %>
    請先登陸
    <a href = "login.jsp">登陸</a>
    <% } %>

等價於

 if (session.getAttribute("userName") != null)
    {
      out.write("\r\n");
      out.write("    歡迎: ");
      out.print( session.getAttribute("userName") );
      out.write("\r\n");
      out.write("    <a href = \"login.jsp\">注銷</a>\r\n");
      out.write("    <br/>\r\n");
      out.write("    ");
 }
    else
    { 
      out.write("\r\n");
      out.write("    請先登陸\r\n");
      out.write("    <a href = \"login.jsp\">登陸</a>\r\n");
      out.write("    ");
 } 
      out.write("\r\n");
      out.write("\r\n");
      out.write("    ");

<%=變量 %> 是 <% out.println(變量) %> 的簡寫方式