最近項目中做的有部分是文件上傳，一個表單中有文本域text，複選框checkbox等，還有一個文件域file，這樣的文件上傳，直接使用form提交即可，但是在該項目中，要求，文件上傳要用ajax，因爲這樣可以得到後臺的返回值，前臺頁面會有提示，達到一個好的用戶體驗效果，但是這樣，就不能直接使用form提交表單，而要使用ajax提交，而ajax是無法傳文件的，jquery的post請求依舊無法達到要求，因此，就在網上找找一些ajax插件，在網上找了不少的博客，但是貌似沒有一些範例，有點不好下手。看了不少的博客，還是自己摸索着來實現，最終選擇了ajaxfileupload.js來做插件，來實現這個功能，下面直接上代碼。
前臺頁面代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery ajaxfileupload文件上傳</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload() {
$.ajaxFileUpload({
url : 'springmvc/upload2',
secureuri : false,
fileElementId : 'fileToUpload',
dataType : 'json',
data : {
name : $('#name').val()
},
success : function(data, status) {
var message = data['message'];
var code = data['code'];
if (code==200) {
alert("操作成功！");
}else{
alert("處理異常！");
}
},
error : function(data, status, e) {
alert("上傳發生異常");
}
})
return false;
}
</script>
</head>
<body>
<h2>JQuery ajaxfileupload文件上傳</h2>
<img id="loading" src="images/loading.gif" style="display: none;">
用戶信息：
<br /> 姓名：
<input id="name" name="name" type="text">
<br /> 附件：
<input id="fileToUpload" name="file1" type="file" class="input">
<br />
<br>
<br>
<input type="button" onclick="return ajaxFileUpload();" value="上傳">
<br /> 上傳進度：
<label id="fileUploadProcess"></label>
</body>
</html>spring controller中的代碼：
package com.tgb.web.controller.annotation.upload;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.Writer;
import java.util.Date;
import java.util.Iterator;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.IOUtils;
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 org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
@Controller
@RequestMapping("/springmvc")
public class UploadController {
@RequestMapping("/upload")
public String addUser(@RequestParam("file") CommonsMultipartFile[] files,
HttpServletRequest request) {
System.out.println("==============================");
for (int i = 0; i < files.length; i++) {
System.out.println("fileName---------->"
+ files[i].getOriginalFilename());
if (!files[i].isEmpty()) {
int pre = (int) System.currentTimeMillis();
try {
// 拿到輸出流，同時重命名上傳的文件
FileOutputStream os = new FileOutputStream("H:/"
+ new Date().getTime()
+ files[i].getOriginalFilename());
// 拿到上傳文件的輸入流
FileInputStream in = (FileInputStream) files[i]
.getInputStream();
// 以寫字節的方式寫文件
int b = 0;
while ((b = in.read()) != -1) {
os.write(b);
}
os.flush();
os.close();
in.close();
int finaltime = (int) System.currentTimeMillis();
System.out.println(finaltime - pre);
} catch (Exception e) {
e.printStackTrace();
System.out.println("上傳出錯");
}
}
}
return "/success";
}
@RequestMapping("/upload2")
public void upload2(HttpServletRequest request, HttpServletResponse response)
throws IllegalStateException, IOException {
System.out.println("upload2 start work.....");
String name = request.getParameter("name");
System.out.println(name);
// 創建一個通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
// 判斷 request 是否有文件上傳,即多部分請求
if (multipartResolver.isMultipart(request)) {
// 轉換成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 記錄上傳過程起始時的時間，用來計算上傳時間
int pre = (int) System.currentTimeMillis();
// 取得上傳文件
MultipartFile file = multiRequest.getFile(iter.next());
if (file != null) {
// 取得當前上傳文件的文件名稱
String myFileName = file.getOriginalFilename();
// 如果名稱不爲“”,說明該文件存在，否則說明該文件不存在
if (myFileName.trim() != "") {
System.out.println(myFileName);
// 重命名上傳後的文件名
String fileName = "demoUpload"
+ file.getOriginalFilename();
// 定義上傳路徑
String path = "E:/" + fileName;
File localFile = new File(path);
file.transferTo(localFile);
}
}
// 記錄上傳該文件後的時間
int finaltime = (int) System.currentTimeMillis();
System.out.println(finaltime - pre);
}
}
responseMessage(response);
}
private void responseMessage(HttpServletResponse response) {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=" + "utf-8");
Writer writer = null;
try {
writer = response.getWriter();
writer.write("{\"code\":" + 200 + ",\"message\":\"" + "上傳成功"
+ "\"}");
writer.flush();
writer.close();
} catch (Exception e) {
e.printStackTrace();
} finally {
IOUtils.closeQuietly(writer);
}
}
}
spring mvc相關配置，在spring的配置文件中配置如下：
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"></property>
<property name="maxUploadSize" value="10485760000"></property>
<property name="maxInMemorySize" value="40960"></property>
</bean>這樣支持文件上傳，上傳文件依賴jar包包括：
commons-fileupload-1.2.2.jar
commons-io-2.4.jar
詳細代碼在：http://download.csdn.net/detail/wolf_soul/8997787，免費下載。