笔者利用ajaxfileupload.js和springmvc/struts2进行文件无刷新上传的操作。
下面只分享ajaxfileupload.js结合springmvc实现文件上传的过程。需要ajaxfileupload.js结合struts2实现文件无刷新上传的在评论区留下邮箱，我会整理好给你发送过去的。
FileUploadController.java
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
/**
* SpringMVC中的文件上传
* 1)由于SpringMVC使用的是commons-fileupload实现,所以先要将其组件引入项目中
* 2)在SpringMVC配置文件中配置MultipartResolver处理器(可在此加入对上传文件的属性限制)
* 3)在Controller的方法中添加MultipartFile参数(该参数用于接收表单中file组件的内容)
* 4)编写前台表单(注意enctype="multipart/form-data"以及<input type="file" name="****"/>)
* PS:由于这里使用了ajaxfileupload.js实现无刷新上传,故本例中未使用表单
*/
@Controller
@RequestMapping("/blog")
public class FileUploadController {
/**
* 这里这里用的是MultipartFile[] myfiles参数,所以前台就要用<input type="file" name="myfiles"/>
* 上传文件完毕后返回给前台[0`filepath],0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
*/
@RequestMapping(value="/fileUpload")
public String addUser(/*@RequestParam("uname") String uname,*/ MultipartFile myfiles, HttpServletRequest request, HttpServletResponse response) throws IOException{
//可以在上传文件的同时接收其它参数
// System.out.println("收到用户[" + uname + "]的文件上传请求");
String identify = request.getParameter("identify");
System.out.println(identify);
//如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
//这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建
String realPath = request.getSession().getServletContext().getRealPath("/upload");
//设置响应给前台内容的数据格式
response.setContentType("text/plain; charset=UTF-8");
//设置响应给前台内容的PrintWriter对象
PrintWriter out = response.getWriter();
//上传文件的原名(即上传前的文件名字)
String originalFilename = null;
//如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
//如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
//上传多个文件时,前台表单中的所有<input type="file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件
if(myfiles.isEmpty()){
out.print("2`/请选择要替换的头像文件");
out.flush();
return null;
}else{
originalFilename = myfiles.getOriginalFilename();
System.out.println("文件原名: " + originalFilename);
System.out.println("文件现在名字: " + identify+originalFilename);
System.out.println("文件名称即表单里的name: " + myfiles.getName());
System.out.println("文件长度: " + myfiles.getSize());
System.out.println("文件类型: " + myfiles.getContentType());
System.out.println("========================================");
try {
//这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
//此处也可以使用Spring提供的MultipartFile.transferTo(File dest)方法实现文件的上传
FileUtils.copyInputStreamToFile(myfiles.getInputStream(), new File(realPath,identify+originalFilename ));
out.print("0`" + request.getContextPath() + "/upload/" + identify+originalFilename);
out.flush();
return null;
} catch (IOException e) {
System.out.println("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");
e.printStackTrace();
out.print("1`文件上传失败，请重试！！");
out.flush();
return null;
}
}
//此时在Windows下输出的是[D:\Develop\apache-tomcat-6.0.36\webapps\AjaxFileUpload\\upload\愤怒的小鸟.jpg]
//System.out.println(realPath + "\\" + originalFilename);
//此时在Windows下输出的是[/AjaxFileUpload/upload/愤怒的小鸟.jpg]
//System.out.println(request.getContextPath() + "/upload/" + originalFilename);
//不推荐返回[realPath + "\\" + originalFilename]的值
//因为在Windows下<img src="file:///D:/aa.jpg">能被firefox显示,而<img src="D:/aa.jpg">firefox是不认的
}
}
spring-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans default-lazy-init="true"
xmlns="http://www.springframework.org/schema/beans"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
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.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd">
<!-- 使用注解的包，包括子集 -->
<context:component-scan base-package="blog.action" />
<!-- 视图解析器 -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/view/" />
<property name="suffix" value=".jsp"></property>
</bean>
<!-- SpringMVC上传文件时,需配置MultipartResolver处理器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 指定所上传文件的总大小不能超过800KB......注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 -->
<property name="maxUploadSize" value="800000"/>
</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_fileupload.jsp页面 -->
<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_fileupload</prop>
</props>
</property>
</bean>
<!-- 启动SpringMVC的注解功能,它会自动注册HandlerMapping、HandlerAdapter、ExceptionResolver的相关实例 -->
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/plain;charset=UTF-8</value>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
</beans>
js调用ajaxfileupload上传文件
function update_back(){
var identify = new Date().getTime();
//执行上传文件操作的函数
$.ajaxFileUpload({
//处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
url:path+'/blog/fileUpload.do?xxxxx=' + new Date().getTime(),
secureuri:false, //是否启用安全提交,默认为false
fileElementId:'img_file', //文件选择框的id属性
dataType:'text', //服务器返回的格式,可以是json或xml等
data:{"identify":identify},
success:function(data, status){ //服务器响应成功时的处理函数
data = data.replace("<PRE>", ''); //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀
data = data.replace("</PRE>", '');
data = data.replace("<pre>", '');
data = data.replace("</pre>", ''); //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
if(data.substring(0, 1) == 0){ //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
//提交表单
var identify1 = $("#thisidentify").val();
var user1 = {back_img:data.substring(2),identify:identify1};
$.ajax({
type: "POST",
url: path + "/action/update_back.do?xxxx=" + new Date().getTime(),
error: function(){alert('error');},
data: user1,
dataType : "json",
success: function(msg){
var user = msg.user;
init_user(user);
}
});
}else{
alert(data.substring(2));
}
},
error:function(data, status, e){ //服务器响应失败时的处理函数
alert('服务器漫游中');
}
});
}ajaxfileupload.js下载地址：
点击下载