標籤：ipa 回調 har catch 提示 click close 序列化表單 document
今天在開發項目的時候碰到了一個需求，一個簡單的檔案上傳。但是上傳後需要通過回呼函數做一些上傳完畢的操作。發現通過<form><file><input submit>能做到檔案上傳，但是回呼函數不是很好實現。 於是打算改用ajax的形式去提交。以下是實現的代碼：
jsp頁面：（css樣式和標籤引入屬於自己定製的，與本文無關，直接去了就好）；
<%@page language="java" contentType="text/html; charset=utf-8"%> <%@include file="/tagDeclare.jsp"%> <%@include file="/headDeclare.jsp"%></head> <body> <form action="${basePath}market/contractDocumentAction!fileUpload.action" name="aform" method="post" id="actionForm" ENCTYPE="multipart/form-data"> <div class="dialogTop"> <table width="400" border="0" align="center" cellpadding="0" cellspacing="10"> <tr> <td>請選擇檔案</td> <td><input name="upload" type="FILE" id="attach" size="10"></td> <input type="hidden" name="conId" id="cid" value="${contractId}" /> </tr> </table> </div> <div class="dialogBottom"> <div class="btns"> <input type="button" class="ldBtnGreen" value="提交" onclick="sub()" /> <input type="button" class="ldBtnGray" value="關閉" onclick="ldDialog.close();" /> </div> </div> </form> </body> </html>
javaScript：
<script type="text/javascript"> function sub() { var fileObj = document.getElementById("attach").files[0]; // js 擷取檔案對象 ie8以下不支援files if (typeof (fileObj) == "undefined" || fileObj.size <= 0) { ldDialog.alert("請選擇檔案"); return; } if(fileObj.size >(1024*1024*10)) { ldDialog.alert("不能上傳超過10Mb的檔案！"); return; } var formFile = new FormData(); formFile.append("file", fileObj); //加入檔案對象 formFile.append("conIds", $("#cid").val()); //附加參數1 因為不能序列化表單，提交的時候將form的非檔案域的值擷取到後拼裝到此處。後台擷取參數的方法不變 formFile.append("filename", fileObj.name);//附加參數2 var data = formFile; $.ajax({ url : "${basePath}market/contractDocumentAction!fileUpload.action?" , data : data, type : "Post", dataType : "json", cache : false,//上傳檔案無需緩衝 processData : false,//用於對data參數進行序列化處理 這裡必須false，如果序列化處理了 那麼form中的file怎無法提交。 contentType : false, //必須 success : function(result) { ldDialog.close("上傳合約檔案成功"); return; } }) } </script>
Struts2 Action代碼
public class ContractDocumentAction extends ActionSupport { // 封裝上傳檔案屬性 private File file; // 封裝上傳檔案名稱 private String filename; public String getFilename() { return filename; } public void setFilename(String filename) { this.filename = filename; }public File getFile() { return file; } public void setFile(File file) { this.file = file; }public void fileUpload() { String filenames = sdf.format(new Date()) + "_" +contract.getSerialNum() + "_" + filename;//檔案名稱 String serverPath = System.getProperty("catalina.home"); InputStream is; try { is = new FileInputStream(file); String fpath = serverPath + File.separator + "file";//檔案儲存路徑 tomcat下的file檔案夾 OutputStream os = new FileOutputStream(new File(fpath, filenames)); byte[] buffer = new byte[is.available()];//這裡盡量不要使用new byte[1024]之類的寫法。可能會導致word文檔上傳之後提示檔案損壞。 int length = 0; while (-1 != (length = is.read(buffer, 0, buffer.length))) { os.write(buffer); } os.close(); is.close(); } catch (Exception e) { e.printStackTrace(); } }}
Java+jsp檔案上傳（ajax）的方式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
