项目源代码及相关jar包:https://github.com/smallbug-vip/repo/tree/master/code/web/back
一、搭建SpringMVC环境
因为现在主要讨论ajax异步上传图片到图片服务器,所以配置SpringMVC环境就简略介绍一下了,更具体步骤可以Google或者直接从链接下载源码。如果不做修改直接运行源码时需要注意,该源码已经链接数据库了,所以在配置文件中需要修改jdbc.properties修改数据库链接参数。否则无法启动。
配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>back</display-name>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:application-context.xml</param-value>
</context-param>
<!-- spring的监听器 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 中文过滤器 -->
<filter>
<filter-name>encoding</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encoding</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>encoding</filter-name>
<url-pattern>*.shtml</url-pattern>
</filter-mapping>
<!-- springmvc 配置 前台 -->
<servlet>
<servlet-name>front</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc-front.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>front</servlet-name>
<url-pattern>*.shtml</url-pattern>
</servlet-mapping>
<!-- springmvc 配置 后台 -->
<servlet>
<servlet-name>back</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc-back.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>back</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
配置pom.xml
文件地址:
https://github.com/smallbug-vip/repo/blob/master/code/web/back/pom.xml
配置springmvc-back.xml
<!-- springmvc 扫包 @Controller @Service ..... -->
<context:component-scan base-package="cn.smallbug"
use-default-filters="false">
<context:include-filter type="annotation"
expression="org.springframework.stereotype.Controller" />
</context:component-scan>
<!-- jsp视图 -->
<bean id="jspViewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/" />
<property name="suffix" value=".jsp" />
</bean>
二、配置XML使SpringMVC可以上传图片
在springmvc-back.xml文件中添加:
<!-- 文件上传 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
<!-- <property name="maxUploadSize" value="2348000"></property> -->
</bean>
三、编写接收文件的Controller
package cn.smallbug.core.controller;
import java.io.IOException;
import java.util.UUID;
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 com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
@Controller
public class UploadImage {
@RequestMapping(value = "/upload/uploadImage.do")
public void uploadImage(@RequestParam(required = false) MultipartFile pic, HttpServletResponse response) {
String ext = FilenameUtils.getExtension(pic.getOriginalFilename());
String uuid = UUID.randomUUID().toString();
String newFileName = uuid + "." + ext;
// 实例化jersey
Client client = new Client();// --->
// 另一台服务器的请求路径
String url = "http://192.168.88.131:8080/back/upload/" + newFileName;
// 设置请求路径
WebResource resource = client.resource(url);
// 发送
try {
resource.put(String.class, pic.getBytes());
} catch (IOException e) {
throw new RuntimeException(e);
}
// 将url格式化成json串
JSONObject jo = new JSONObject();
jo.put("url", url);
// 发送
try {
response.setContentType("application/json;charset=UTF-8");
// response.setContentType("text/xml;charset=UTF-8");
// response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(jo.toString());
} catch (IOException e) {
throw new RuntimeException(e);
}
}
}
四、导入js库,编写jsp
上传文件需要用到jquery.js和到jquery.form.js
编写表单和图片显示域:
<body>
<form id="sentImage" action="${pageContext.request.contextPath }/upload/uploadImage.do" method="post"
enctype="multipart/form-data">
<input type="file" onchange="uploadPic()" name="pic" />
</form>
<div id="20160202852"></div>
</body>
当选择图片之后会触发uploadPic()函数,开始上传图片:
function uploadPic() {
//定义参数
var options = {
url : "${pageContext.request.contextPath }/upload/uploadImage.do",
dataType : "json",
type : "post",
//上传成功后回调函数
success : function(data) {
var img = $("<img />");
img.attr("src",data.url);
$("#20160202852").append(img);
}
};
//jquery.form使用方式
$("#sentImage").ajaxSubmit(options);
}
五、设置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
- 大小: 18 KB
- 大小: 58.5 KB
- 大小: 146.9 KB
分享到:
相关推荐
调用服务器的webservice接口,实现从Android上传图片到服务器,然后从服务器下载图片到Android客户端 从Android端用io流读取到要上传的图片,用Base64编码成字节流的字符串,通过调用webservice把该字符串作为参数...
网上有,但是只是介绍,没有现成的代码,现在我做了一个最简单的web服务,在客户端运用AJAX技术进行了调用,测试成功!
C# winfrom中webservice接口连接服务器上传图片和下载图片。 上传图片和下载图片,使用的时候先要在你要上传的服务端用IIS发布webservice接口 传输图片
ajax跨域调用webservice实现文件上传,项目使用vs2019创建,请示用vs2019以上版本工具进行打开。
C# winfrom中webservice接口连接服务器上传图片和下载图片 C# winfrom中webservice接口连接服务器上传图片和下载图片
做智能客户端的时候,当用到WebService时,由于服务器处理速度、网络传输速度等各种原因会使一个WebService从请求开始到获得响应结果之间等待一段时间,这时候线程会处于阻塞状态,程序会等待请求结果导致客户端无法...
jQuery使用Ajax方法调用WebService.rarjQuery使用Ajax方法调用WebService.rarjQuery使用Ajax方法调用WebService.rar
android 封装异步调用c#Webservice,需要时调用一下就ok。
jQuery使用Ajax方法调用WebService.doc
android使用ksoap2通过webservice上传图片到服务器
webservice8 异步调用webservice
使用webservice把本地图片上传到指定的服务器,根据图片名称从服务器上获取图片并显示在picturebox
三个文档打包下载,分别详细讲述了ajax以及JavaScript调用WebService的具体用法,是学习ajax和WebService的良好示例。
WebService服务器端实例WebService服务器端实例WebService服务器端实例
ajax跨域请求调用webservice接口+视频教程,上次的不带视频教程,这次带一个视频教程,一个流程下来,想学不会都很难!
只是android上传图片到.net webservice的demo,东拼西凑,总算可以了,以备不时之需
webservice异步调用webservice异步调用
研究Webservice异步调用的实现, 1、通过异步调用的方式实现高性能的使用WebService的API