JQuery 實現檔案上傳
阿新 • • 發佈：2019-01-23
簡述：
實現前端使用jquery上傳檔案
後臺用servlet處理檔案上傳以及儲存
知識點：
1. 用到ajaxfileupload.js庫
2. 後臺servlet檔案儲存
其中ajaxfileupload的庫下載地址：
Maven中需要新增兩個java的庫，用來上傳以及在伺服器儲存檔案
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.2</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency>
專案結構（主要是js）
testUpload.html
<!DOCTYPE html> <head> <title>MyWebProject</title> <meta charset="utf-8" /> <link type="text/css" href="./lib/css/jquery-ui-1.8.19.custom.css" rel="stylesheet" /> <link type="text/css" href="./lib/css/ajaxfileupload.css" rel="stylesheet" /> <script type="text/javascript" src="./lib/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="./lib/js/ajaxfileupload.js"></script> <script type="text/javascript"> function ajaxFileUpload() { $.ajaxFileUpload({ url : "./UploadFile", //submit to UploadFileServlet secureuri : false, fileElementId : 'fileToUpload', dataType : 'text', //or json xml whatever you like~ success : function(data, status) { $("#result").append(data); }, error : function(data, status, e) { $("#result").append(data); } }); return false; } </script> </head> <body> <!-- upload file --> <form name="form" action="./UploadFile" method="POST" enctype="multipart/form-data"> <table class="tableForm"> <thead> <tr> <th>JQuery Ajax File Upload</th> </tr> </thead> <tbody> <tr> <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> </tr> </tbody> <tfoot> <tr> <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td> </tr> </tfoot> </table> <div id="result" style="margin-left:200px"></div> </form> </body> </html>
後臺實現：
UploadFileServlet.java
package mwp.servlet; import java.io.File; import java.io.IOException; import java.util.Iterator; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileItemFactory; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.slf4j.Logger; import org.slf4j.LoggerFactory; /** * Servlet implementation class UploadFileServlet */ public class UploadFileServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static Logger logger = LoggerFactory.getLogger(UploadFileServlet.class); /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); //判斷提交過來的表單是否為檔案上傳選單 boolean isMultipart= ServletFileUpload.isMultipartContent(request); if(isMultipart){ //構造一個檔案上傳處理物件 FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); Iterator items; try{ //解析表單中提交的所有檔案內容 items = upload.parseRequest(request).iterator(); while(items.hasNext()){ FileItem item = (FileItem) items.next(); if(!item.isFormField()){ //取出上傳檔案的檔名稱 String name = item.getName(); //取得上傳檔案以後的儲存路徑 String fileName = name.substring(name.lastIndexOf('\\') + 1, name.length()); //上傳檔案以後的儲存路徑 String saveDir = this.getServletContext().getRealPath("/upload/"); if (!(new File(saveDir).isDirectory())){ new File(saveDir).mkdir(); } String path= saveDir + File.separatorChar + fileName; //上傳檔案 File uploaderFile = new File(path); item.write(uploaderFile); } } }catch(Exception e){ e.printStackTrace(); response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); return; } response.setStatus(HttpServletResponse.SC_OK); response.getWriter().append("Success Upload"); } } }
測試介面：
如若資料交換格式是JSON，則如下示例
JS
/**
* 上傳圖片
*/
function uploadUnitImage() {
showLoading("正在上傳，請等待...");
$.ajaxFileUpload
(
{
url:'/my-web/fileUpload?action=uploadImage',//用於檔案上傳的伺服器端請求地址，目前與優惠券上傳圖片請求地址一致
secureuri:false,//一般設定為false
fileElementId: 'unitImageToUpload', //檔案上傳空間的id屬性
dataType: 'json',//返回值型別 一般設定為json
success: function (data, status) //伺服器成功響應處理函式
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
dismissLoading();
}else
{
//若上傳成功則自定義一些事
// do something
}
}
},
error: function (data, status, e)//伺服器響應失敗處理函式
{
alert(e);
dismissLoading();
}
}
)
}JAVA
public void uploadImage(
HttpServletRequest request,HttpServletResponse response) throws Exception{
logger.debug("上傳圖片");
//上傳圖片
String fileUrl=uploadFileAndGetFileUrl(request);
String responseText = "";
if(!StringUtils.isEmpty(fileUrl)){
logger.debug("圖片下載地址是"+fileUrl);
responseText="{error: '',url: '"+fileUrl+"'}";
}else{
logger.debug("賬戶建立頁面，圖片上傳失敗");
responseText="{error: ''}";
}
responseOutWithText(response, responseText);
}由於AjaxFileUpload在解析返回的response若為ＪＳＯＮ資料時會出現問題，所以需要轉為text
/**
* 以文字形式下發資料
* @param response
* @param responseText
*/
protected void responseOutWithText(HttpServletResponse response,
String responseText) {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
PrintWriter out = null;
try {
out = response.getWriter();
out.println(responseText);
out.close();
logger.debug("下發的資料是");
logger.debug(responseText);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
}