<p></p><pre>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><span> </span>//hiden标签的value值中，方法见下面的writeHide函数 } }, complete: function(xmlHttpRequest) {<span> </span>//这里将html中的文件上传标签替换为新的标签，是应为我在开发过程中发现，当ajax执行一次上传操作之后，再使用file标签选择文件时，标签没有反应，</pre><pre><span> </span>//所以暂时使用了这种方法。 inputObject.replaceWith('<input type="file" />'); }, error: function (data, status, e)//服务器响应失败处理函数 { //alert("无法连接到服务器"); } }) }</pre><pre></pre><pre>function writeHide(data){ <span> </span>if($("#addressid").get(0).value == "") <span> </span>{ <span> </span>$("#addressid").get(0).value = data.newName; <span> </span>} <span> </span>else <span> </span>{ <span> </span>$("#addressid").get(0).value = $("#addressid").get(0).value+","+data.newName; <span> </span>} } </pre><p></p> <p>3 spring.</p> <p>完成上面两个部分之后，前台的主要工作基本就结束了。我后台使用了spring框架。</p> <p>首先是springMVC的配置文件：viewspace-servlet.xml</p> <p></p><pre><?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 "> <!-- 静态资源 --> <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 /> <bean /> <!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面 --> <bean p:viewClass="org.springframework.web.servlet.view.JstlView" p:prefix="/WEB-INF/jsp/" p:suffix=".jsp"/> <!-- 使springMVC支持图片上传 --> <bean> <!-- 最大上传尺寸1MB --> <property value="10485760"/> <!-- 默认编码 --> <property value="UTF-8" /> <!-- 上传文件的解析 --> <property value="true" /> </bean> <!-- SpringMVC在超出上传文件限制时,会抛出org.springframework.web.multipart.MaxUploadSizeExceededException --> <!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的,而且此时还没有进入到Controller方法中 --> <bean > <property> <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><?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 " 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>
接下来是重点，在Controller中，使用如下方式接受前台穿回来的文件。<br>