（2）之后调用ajaxfileupload.js库，编写图片上传脚本，这里命名为ajaxfileuplaod_implement.js
<p></p><pre name="code" class="javascript">function fileUpload() {
var inputObject = $("#fileImage").get(0);
if(inputObject.value == "")
{
alert("清先选择需要上传的图片");
return false;
}
$.ajaxFileUpload({
url: '/PicSubmit/pic', //服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
type: 'post',
fileElementId: 'fileImage', //文件上传域的ID
dataType: 'text', //返回值类型 一般设置为json
enctype:'multipart/form-data',//注意一定要有该参数
success: function (data, status) //服务器成功响应处理函数
{
data=decodeURI(data);//服务器端使用urlencode将中文字符编码，所以这里需要解码。这样做的目的是防止中文乱码
var address = JSON.parse(data);
for(var i=0;i<address.length;i++){
ajaxfile_onSuccess(address[i]); //这里的success回调函数可以自己定义，但是有一点需要注意，就是需要把服务器返回来的图片存储路径写入</pre><pre name="code" class="javascript"><span style="white-space:pre"> </span>//hiden标签的value值中，方法见下面的writeHide函数
}
},
complete: function(xmlHttpRequest)
{<span style="white-space:pre"> </span>//这里将html中的文件上传标签替换为新的标签，是应为我在开发过程中发现，当ajax执行一次上传操作之后，再使用file标签选择文件时，标签没有反应，</pre><pre name="code" class="javascript"><span style="white-space:pre"> </span>//所以暂时使用了这种方法。
inputObject.replaceWith('<input type="file" id="fileImage" name="fileImage" />');
},
error: function (data, status, e)//服务器响应失败处理函数
{
//alert("无法连接到服务器");
}
})
}</pre><pre name="code" class="javascript"></pre><pre name="code" class="javascript">function writeHide(data){
<span style="white-space:pre"> </span>if($("#addressid").get(0).value == "")
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>$("#addressid").get(0).value = data.newName;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>else
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>$("#addressid").get(0).value = $("#addressid").get(0).value+","+data.newName;
<span style="white-space:pre"> </span>}
}
</pre><p></p>
<p>3 spring.</p>
<p>完成上面两个部分之后，前台的主要工作基本就结束了。我后台使用了spring框架。</p>
<p>首先是springMVC的配置文件：viewspace-servlet.xml</p>
<p></p><pre name="code" class="html"><?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd">
<!-- 静态资源 -->
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/image/**" location="/image/" />
<!-- 扫描web包，应用Spring的注解 -->
<context:component-scan base-package="web"/>
<bean id="defaultAnnotationHandlerMapping"
class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
<bean id="annotationMethodHandlerAdapter"
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:viewClass="org.springframework.web.servlet.view.JstlView"
p:prefix="/WEB-INF/jsp/"
p:suffix=".jsp"/>
<!-- 使springMVC支持图片上传 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 最大上传尺寸1MB -->
<property name="maxUploadSize" value="10485760"/>
<!-- 默认编码 -->
<property name="defaultEncoding" value="UTF-8" />
<!-- 上传文件的解析 -->
<property name="resolveLazily" value="true" />
</bean>
<!-- SpringMVC在超出上传文件限制时,会抛出org.springframework.web.multipart.MaxUploadSizeExceededException -->
<!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的,而且此时还没有进入到Controller方法中 -->
<bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver" >
<property name="exceptionMappings">
<props>
<!-- 遇到MaxUploadSizeExceededException异常时,自动跳转到/WEB-INF/jsp/error_toobig.jsp页面 -->
<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_fileupload</prop>
</props>
</property>
</bean>
</beans></pre>其中，类“org.springframework.web.multipart.commons.CommonsMultipartResolver”的配置是必须的，否则后台无法收到前台传来的文件。<p></p>
<p><br>
</p>
<p>为了防止文件名中的中文字符传输出现问题，在web.xml中做如下配置：</p>
<p></p><pre name="code" class="html"><?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_3_0.xsd" version="3.0">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<servlet>
<servlet-name>viewspace</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>viewspace</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 支持传输中文字符 -->
<filter>
<filter-name>characterEncodingFilter</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>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app></pre><p></p>
<p><br>
</p>
