ajax异步上传图片webservice转存图片服务器

项目源代码及相关jar包：https://github.com/smallbug-vip/repo/tree/master/code/web/back  

一、搭建SpringMVC环境  

    因为现在主要讨论ajax异步上传图片到图片服务器，所以配置SpringMVC环境就简略介绍一下了，更具体步骤可以Google或者直接从链接下载源码。如果不做修改直接运行源码时需要注意，该源码已经链接数据库了，所以在配置文件中需要修改jdbc.properties修改数据库链接参数。否则无法启动。 

配置web.xml 

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
3.     xmlns="http://java.sun.com/xml/ns/javaee"  
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
5.     id="WebApp_ID" version="2.5">  
6.     <display-name>back</display-name>  
7.   
8.     <context-param>  
9.         <param-name>contextConfigLocation</param-name>  
10.         <param-value>classpath:application-context.xml</param-value>  
11.     </context-param>  
12.     <!-- spring的监听器 -->  
13.     <listener>  
14.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
15.     </listener>  
16.   
17.     <!-- 中文过滤器 -->  
18.     <filter>  
19.         <filter-name>encoding</filter-name>  
20.         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>  
21.         <init-param>  
22.             <param-name>encoding</param-name>  
23.             <param-value>UTF-8</param-value>  
24.         </init-param>  
25.     </filter>  
26.   
27.     <filter-mapping>  
28.         <filter-name>encoding</filter-name>  
29.         <url-pattern>*.do</url-pattern>  
30.     </filter-mapping>  
31.   
32.     <filter-mapping>  
33.         <filter-name>encoding</filter-name>  
34.         <url-pattern>*.shtml</url-pattern>  
35.     </filter-mapping>  
36.   
37.     <!-- springmvc 配置 前台 -->  
38.     <servlet>  
39.         <servlet-name>front</servlet-name>  
40.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
41.         <init-param>  
42.             <param-name>contextConfigLocation</param-name>  
43.             <param-value>classpath:springmvc-front.xml</param-value>  
44.         </init-param>  
45.     </servlet>  
46.     <servlet-mapping>  
47.         <servlet-name>front</servlet-name>  
48.         <url-pattern>*.shtml</url-pattern>  
49.     </servlet-mapping>  
50.   
51.     <!-- springmvc 配置 后台 -->  
52.     <servlet>  
53.         <servlet-name>back</servlet-name>  
54.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
55.         <init-param>  
56.             <param-name>contextConfigLocation</param-name>  
57.             <param-value>classpath:springmvc-back.xml</param-value>  
58.         </init-param>  
59.     </servlet>  
60.     <servlet-mapping>  
61.         <servlet-name>back</servlet-name>  
62.         <url-pattern>*.do</url-pattern>  
63.     </servlet-mapping>  
64.   
65.     <welcome-file-list>  
66.         <welcome-file>index.html</welcome-file>  
67.         <welcome-file>index.htm</welcome-file>  
68.         <welcome-file>index.jsp</welcome-file>  
69.     </welcome-file-list>  
70.   
71. </web-app>  

配置pom.xml 

    文件地址： https://github.com/smallbug-vip/repo/blob/master/code/web/back/pom.xml  

配置springmvc-back.xml 

Xml代码  

1. <!-- springmvc 扫包 @Controller @Service ..... -->  
2.     <context:component-scan base-package="cn.smallbug"  
3.         use-default-filters="false">  
4.         <context:include-filter type="annotation"  
5.             expression="org.springframework.stereotype.Controller" />  
6.     </context:component-scan>  
7. <!-- jsp视图 -->  
8.     <bean id="jspViewResolver"  
9.         class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
10.         <property name="prefix" value="/" />  
11.         <property name="suffix" value=".jsp" />  
12.     </bean>  

二、配置XML使SpringMVC可以上传图片  

在springmvc-back.xml文件中添加： 

Xml代码  

1. <!-- 文件上传 -->  
2. <bean id="multipartResolver"  
3.     class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
4.     <property name="defaultEncoding" value="UTF-8"></property>  
5.     <!-- <property name="maxUploadSize" value="2348000"></property> -->  
6. </bean>  

三、编写接收文件的Controller  

Java代码  

1. package cn.smallbug.core.controller;  
2.   
3. import java.io.IOException;  
4. import java.util.UUID;  
5.   
6. import javax.servlet.http.HttpServletResponse;  
7.   
8. import org.apache.commons.io.FilenameUtils;  
9. import org.json.JSONObject;  
10. import org.springframework.stereotype.Controller;  
11. import org.springframework.web.bind.annotation.RequestMapping;  
12. import org.springframework.web.bind.annotation.RequestParam;  
13. import org.springframework.web.multipart.MultipartFile;  
14.   
15. import com.sun.jersey.api.client.Client;  
16. import com.sun.jersey.api.client.WebResource;  
17.   
18. @Controller  
19. public class UploadImage {  
20.   
21.     @RequestMapping(value = "/upload/uploadImage.do")  
22.     public void uploadImage(@RequestParam(required = false) MultipartFile pic, HttpServletResponse response) {  
23.   
24.         String ext = FilenameUtils.getExtension(pic.getOriginalFilename());  
25.         String uuid = UUID.randomUUID().toString();  
26.         String newFileName = uuid + "." + ext;  
27.   
28.         // 实例化jersey  
29.         Client client = new Client();// --->  
30.   
31.         // 另一台服务器的请求路径  
32.         String url = "http://192.168.88.131:8080/back/upload/" + newFileName;  
33.   
34.         // 设置请求路径  
35.         WebResource resource = client.resource(url);  
36.   
37.         // 发送  
38.         try {  
39.             resource.put(String.class, pic.getBytes());  
40.         } catch (IOException e) {  
41.             throw new RuntimeException(e);  
42.         }  
43.   
44.         // 将url格式化成json串  
45.         JSONObject jo = new JSONObject();  
46.         jo.put("url", url);  
47.   
48.         // 发送  
49.         try {  
50.             response.setContentType("application/json;charset=UTF-8");  
51.             // response.setContentType("text/xml;charset=UTF-8");  
52.             // response.setContentType("text/plain;charset=UTF-8");  
53.             response.getWriter().write(jo.toString());  
54.         } catch (IOException e) {  
55.             throw new RuntimeException(e);  
56.         }  
57.     }  
58. }  

四、导入js库，编写jsp  

 

上传文件需要用到jquery.js和到jquery.form.js 

编写表单和图片显示域： 

Xml代码  

1. <body>  
2.   
3.     <form id="sentImage" action="${pageContext.request.contextPath }/upload/uploadImage.do" method="post"  
4.         enctype="multipart/form-data">  
5.         <input type="file" onchange="uploadPic()" name="pic" />  
6.     </form>  
7.     <div id="20160202852"></div>  
8. </body>  

当选择图片之后会触发uploadPic()函数，开始上传图片： 

Java代码  

1. function uploadPic() {  
2.         //定义参数  
3.         var options = {  
4.             url : "${pageContext.request.contextPath }/upload/uploadImage.do",  
5.             dataType : "json",  
6.             type : "post",  
7.             //上传成功后回调函数  
8.             success : function(data) {  
9.                 var img = $("<img />");  
10.                 img.attr("src",data.url);  
11.                 $("#20160202852").append(img);  
12.             }  
13.         };  
14.   
15.         //jquery.form使用方式  
16.         $("#sentImage").ajaxSubmit(options);  
17.   
18.     }  

五、设置Tomcat，建立图片服务器。  

打开${TOMCAT_HOME}/conf文件夹下的web.xml找到下图中相应位置，添加红框中的代码： 



    因为这个back项目建了一个upload文件夹，所以可以将本项目直接发布到图片服务器上做接收用，如果害怕加载相关jar文件，无端烧内存的话，可以建一个新的web项目，然后在跟目录上建一个upload文件夹，以次来接收图片也可以。我搭建的时候是在虚拟机里另开了一台CentOS作为服务器的，如果要在本机直接运行两个tomcat的话，记得一定要改server.xml中的三个端口。 

六、运行  

首先启动两个服务器，然后访问web服务器，选择图片，然后就能看到图片直接在图片域显示出来了。并且查看地址，会发现是图片服务器的地址。 

 

项目源代码及相关jar包：https://github.com/smallbug-vip/repo/tree/master/code/web/back

转自：http://smallbug-vip.iteye.com/blog/2275574