SpringMVC上傳下載，頁面不重新整理提交帶附件的form表單
阿新 • • 發佈：2019-02-16
周所周知，如果要提交的form表單內帶有附件，那麼需要設定屬性enctype="multipart/form-data"
當我們要實現頁面不重新整理提交form表單的時候需要用到ajax，但是ajax提交form表單的時候需要將表單值進行序列化操作（$(formId).formSerialize()）。
所以問題出現了，表單序列化後form表單內的檔案在後臺就接不到了。
所以帶有附件的form表單不能用ajax提交。既然我們要實現頁面不重新整理，那就需要模擬ajax進行提交form表單。
我是用隱藏的iframe實現的：
前提條件：
springmvc配置檔案中加上 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
需要jar包：ant-1.6.5.jar;commons-fileupload-1.2.2.jar;commons-io-2.0.1.jar
程式碼示例：
上傳檔案jsp頁面：
<form id="form2" name="form2" target="hidden_frame" enctype="multipart/form-data" method="post" > <!--two end--> <h4 class="title_bg_b"> <span class="title_left">軟體升級</span> </h4> <ul class="form_list_ul clear"> <li class="clear"> <span class="list_li_span">軟體安裝包：</span> <input type="file" id="file1" name="file1"/> <input type="button" name="button2" onclick="uploadFile()" class="blue_btn" value="上傳" /><span id="msgspan"></span> <input type="button" name="button2" id="shengji" class="blue_btn" onclick="Upgrade()" title="正在實現" value="升級" /> </li> </ul> </form> <iframe name='hidden_frame' id="hidden_frame" style='display:none' width="99%"></iframe>
js函式：
function createPrompt(info){ var msgw,msgh,bordercolor; msgw=400;//提示視窗的寬度 msgh=100;//提示視窗的高度 titleheight=25//提示視窗標題高度 bordercolor="#336699";//提示視窗的邊框顏色 titlecolor="#99CCFF";//提示視窗的標題顏色 var sWidth,sHeight; sWidth=document.body.offsetWidth;//瀏覽器工作區域內頁面寬度 或使用 screen.width//螢幕的寬度 sHeight=screen.height;//螢幕高度（垂直解析度） //背景層（大小與視窗有效區域相同，即當彈出對話方塊時，背景顯示為放射狀透明灰色） var bgObj=document.createElement("div");//建立一個div物件（背景層） //動態建立元素，這裡建立的是 div //定義div屬性，即相當於(相當於，但確不是，必須對物件屬性進行定義 //<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div> bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.background="#777"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj);//在body內新增該div物件 //建立一個div物件（提示框層） var msgObj=document.createElement("div") //定義div屬性，即相當於 //<div id="msgDiv" align="center" style="background-color:white; border:1px solid #336699; position:absolute; left:50%; top:50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; width:400px; height:100px; text-align:center; line-height:25px; z-index:100001;"></div> msgObj.setAttribute("id","msgDiv"); msgObj.setAttribute("align","center"); msgObj.style.background="white"; msgObj.style.border="1px solid " + bordercolor; msgObj.style.position = "absolute"; msgObj.style.left = "50%"; msgObj.style.top = "50%"; msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgObj.style.marginLeft = "-225px" ; msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; msgObj.style.width = msgw + "px"; msgObj.style.height =msgh + "px"; msgObj.style.textAlign = "center"; msgObj.style.lineHeight ="25px"; msgObj.style.zIndex = "10001"; document.body.appendChild(msgObj);//在body內新增提示框div物件msgObj var txt=document.createElement("p");//建立一個p物件（提示框提示資訊） //定義p的屬性，即相當於 //<p style="margin:1em 0;" id="msgTxt">測試效果</p> txt.style.margin="1em 0" txt.setAttribute("id","msgTxt"); txt.innerHTML=info;//來源於函式呼叫時的引數值 document.getElementById("msgDiv" ).appendChild(txt);//在提示框div中新增提示資訊物件txt var img=document.createElement("img"); img.src="/resources/images/waiting.gif"; img.style.width="150"; img.style.height="25"; img.style.align="center"; document.getElementById("msgDiv").appendChild(img); }
後臺控制類：
package com.bohui.ipview.common;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import com.bohui.ipview.bean.FileUploadBean;
/**
*
* @author caohaicheng
* @date 2014-3-20 上午11:56:35
*/
@Controller
@RequestMapping(value = "fileOperate")
public class FileOperateController {
/**
* 上傳檔案
*
* @author caohaicheng
* @date 2014-3-20 上午11:56:35
* @param request
* @return
* @throws Exception
*/
@RequestMapping(value = "upload1")
public ModelAndView upload(HttpServletRequest request) throws Exception {
ModelAndView mv=new ModelAndView("sysconfig/fileUploadResult");
FileUploadBean fup = new FileUploadBean();
fup=FileOperateUtil.upload(request );
mv.addObject("fileName",fup.getFileName() );
mv.addObject("fileSize",fup.getFileSize() );
mv.addObject("FileCreateDate", fup.getFileCreateDate());
mv.addObject("returnDesc", fup.getReturnDesc());
mv.addObject("returnFlag",fup.getReturnFlag() );
return mv;
}
/**
* 下載
*
* @author caohaicheng
* @date 2014-3-20 上午11:56:35
* @param attachment
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "download")
public ModelAndView download(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String storeName = "201205051340364510870879724.zip";
String realName = "Java設計模式.zip";
String contentType = "application/octet-stream";
FileOperateUtil.download(request, response, storeName, contentType,
realName);
return null;
}
}
實現類：
package com.bohui.ipview.common;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import com.bohui.ipview.bean.FileUploadBean;
import com.bohui.ipview.util.DateTimeUtil;
/**
*
* @author caohaicheng
* @date 2014-3-20 上午11:56:35
*/
public class FileOperateUtil {
private static final String UPLOADDIR = "/bh/update/";// 上傳後放在哪個位置(linux)
private static final String UPLOADDIR1 = "/bh/backup/";// 上傳後放在哪個位置(linux)
/**
* 將上傳的檔案進行重新命名
*
* @author caohaicheng
* @date 2014-3-20 上午11:56:35
* @param name
* @return
*/
private static String rename(String name) {
Long now = Long.parseLong(new SimpleDateFormat("yyyyMMddHHmmss")
.format(new Date()));
Long random = (long) (Math.random() * now);
String fileName = now + "" + random;
if (name.indexOf(".") != -1) {
fileName += name.substring(name.lastIndexOf("."));
}
return fileName;
}
/**
* 壓縮後的檔名
*
* @author caohaicheng
* @date 2014-3-20 上午11:56:35
* @param name
* @return
*/
private static String zipName(String name) {
String prefix = "";
if (name.indexOf(".") != -1) {
prefix = name.substring(0, name.lastIndexOf("."));
} else {
prefix = name;
}
return prefix + ".zip";
}
/**
* 上傳檔案
*
* @author caohaicheng
* @date 2014-3-20 上午11:56:35
* @param request
* @param params
* @param values
* @return
* @throws Exception
*/
public static FileUploadBean upload(HttpServletRequest request) throws Exception {
FileUploadBean fup = new FileUploadBean();
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = mRequest.getFileMap();
//String uploadDir = request.getSession().getServletContext().getRealPath("/")+ FileOperateUtil.UPLOADDIR; //上傳至相對路徑
String uploadDir = FileOperateUtil.UPLOADDIR; //上傳至絕對路徑
String uploadDir1 = FileOperateUtil.UPLOADDIR1; //上傳至絕對路徑,這個是備份資料夾
File file = new File(uploadDir);
File file1 = new File(uploadDir1);
//如果不存在該路徑就建立
if (!file.exists()) {
file.mkdir();
}
if (!file1.exists()) {
file1.mkdir();
}
delAllFile(uploadDir); //刪除完裡面所有內容
String fileName = null;
int i = 0;
for (Iterator<Map.Entry<String, MultipartFile>> it = fileMap.entrySet()
.iterator(); it.hasNext(); i++) {
Map.Entry<String, MultipartFile> entry = it.next();
MultipartFile mFile = entry.getValue();
fileName = mFile.getOriginalFilename();//獲得檔名字
//String storeName = rename(fileName);//對檔案進行重新命名
String noZipName = uploadDir + fileName;//檔案路徑
String noZipName1 = uploadDir1 + fileName;
File uploadFile = new File(noZipName);
File uploadFile1 = new File(noZipName1);
//String zipName = zipName(noZipName);//獲得壓縮後的檔名字
// 上傳成為壓縮檔案
/*
ZipOutputStream outputStream = new ZipOutputStream(new BufferedOutputStream(new FileOutputStream(noZipName)));
outputStream.putNextEntry(new ZipEntry(fileName));
outputStream.setEncoding("GBK");
FileCopyUtils.copy(mFile.getInputStream(), outputStream);
*/
try {
FileCopyUtils.copy(mFile.getBytes(), uploadFile);
} catch (Exception e) {
fup.setReturnDesc("升級檔案上傳失敗");
fup.setReturnFlag(false);
e.printStackTrace();
return fup;
}
try {
FileCopyUtils.copy(mFile.getBytes(), uploadFile1);
} catch (Exception e) {
fup.setReturnDesc("升級檔案備份失敗");
fup.setReturnFlag(false);
e.printStackTrace();
return fup;
}
fup.setReturnFlag(true);
fup.setFileName(fileName);
fup.setFileCreateDate(DateTimeUtil.nowToString());
fup.setFileSize( new File(noZipName).length());
}
return fup;
}
/**
* 下載
*
* @author caohaicheng
* @date 2014-3-20 上午11:56:35
* @param request
* @param response
* @param storeName
* @param contentType
* @param realName
* @throws Exception
*/
public static void download(HttpServletRequest request,
HttpServletResponse response, String storeName, String contentType,
String realName) throws Exception {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
BufferedInputStream bis = null;
BufferedOutputStream bos = null;
String ctxPath = request.getSession().getServletContext()
.getRealPath("/")
+ FileOperateUtil.UPLOADDIR;
String downLoadPath = ctxPath + storeName;
long fileLength = new File(downLoadPath).length();
response.setContentType(contentType);
response.setHeader("Content-disposition", "attachment; filename="
+ new String(realName.getBytes("utf-8"), "ISO8859-1"));
response.setHeader("Content-Length", String.valueOf(fileLength));
bis = new BufferedInputStream(new FileInputStream(downLoadPath));
bos = new BufferedOutputStream(response.getOutputStream());
byte[] buff = new byte[2048];
int bytesRead;
while (-1 != (bytesRead = bis.read(buff, 0, buff.length))) {
bos.write(buff, 0, bytesRead);
}
bis.close();
bos.close();
}
//刪除指定資料夾下所有檔案
//param path 資料夾完整絕對路徑
public static boolean delAllFile(String path) {
boolean flag = false;
File file = new File(path);
if (!file.exists()) {
return flag;
}
if (!file.isDirectory()) {
return flag;
}
String[] tempList = file.list();
File temp = null;
for (int i = 0; i < tempList.length; i++) {
if (path.endsWith(File.separator)) {
temp = new File(path + tempList[i]);
} else {
temp = new File(path + File.separator + tempList[i]);
}
if (temp.isFile()) {
temp.delete();
}
if (temp.isDirectory()) {
delAllFile(path + "/" + tempList[i]);//先刪除資料夾裡面的檔案
flag = true;
}
}
return flag;
}
}
package com.bohui.ipview.bean;
public class FileUploadBean {
private String fileName;
private Long fileSize;
private String FileCreateDate;
private String returnDesc;
private Boolean returnFlag;
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public String getFileCreateDate() {
return FileCreateDate;
}
public void setFileCreateDate(String fileCreateDate) {
FileCreateDate = fileCreateDate;
}
public String getReturnDesc() {
return returnDesc;
}
public void setReturnDesc(String returnDesc) {
this.returnDesc = returnDesc;
}
public Boolean getReturnFlag() {
return returnFlag;
}
public void setReturnFlag(Boolean returnFlag) {
this.returnFlag = returnFlag;
}
public long getFileSize() {
return fileSize;
}
public void setFileSize(long l) {
this.fileSize = l;
}
}
子頁面jsp檔案fileUploadResult.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function parentTishi(){
parent.tishi("${fileName}","${fileSize}","${FileCreateDate}","${returnDesc}","${returnFlag}");
}
</script>
</head>
<body onload="parentTishi()" >
這裡是上傳檔案的返回頁面.....
</body>
</html>