之前為了做截圖上傳的功能，首先做了個小練習，即對多個普通檔案+普通文本進行非同步上傳。由於對Ajax不熟，前端學得又那麼渣，所以搞了好久的說。。
首先是前端提交index.jsp頁面，這裡用到了formData，使用Jquery來發送formData對象。上傳多個檔案和普通文本，使用formData.append方法即可，下面給出index.jsp代碼：
<%@ 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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="js/jquery.min.js" type="text/javascript"></script></head><script type="text/javascript">function upload() {mydata = document.getElementById("mydata").value; formData = new FormData(document.getElementById("upform")); formData.append("myfile1",myfile1.files[0]); formData.append("myfile2", myfile2.files[0]); formData.append("mydata", mydata); $.ajax({ contentType:"multipart/form-data", url:"Upload", type:"POST", data:formData, dataType:"text", processData: false, // 告訴jQuery不要去處理髮送的資料 contentType: false, // 告訴jQuery不要去設定Content-Type要求標頭 success: function(data){ document.getElementById("tip").innerHTML = data; } });}</script><body> <form name="upform" action="" method="POST" enctype="multipart/form-data"> <input type ="file" name="myfile1" id="myfile1"/><br/> <input type ="file" name="myfile2" id="myfile2"/><br/> 說幾句吧：<input type="text" name="mydata" id="mydata"/><br/> <input type="button" value="確定" onclick="upload()"/><br/> </form> <div id="tip"></div></body></html>後台Servlet處理,這裡用到了幾個上傳檔案的包：
commons-beanutils-1.9.1.jar
commons-fileupload-1.3.1.jar
commons-io-2.4.jar
用FileItem類的isFormField方法來判斷是否為檔案，為檔案則儲存，不是檔案就擷取內容。最後用printWriter反饋資訊給前端。
後台代碼如下：
package servlet;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.PrintWriter;import java.util.Date;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.apache.commons.fileupload.util.Streams;/** * Servlet implementation class for Servlet: UploadServlet * */@WebServlet("/Upload")public class Upload extends javax.servlet.http.HttpServlet implementsjavax.servlet.Servlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {String savePath = this.getServletContext().getRealPath("/userFiles/");//儲存路徑String retMsg = "";//定義將返回給用戶端的資訊try {if (ServletFileUpload.isMultipartContent(request)) {List<FileItem> items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);for (FileItem item : items) {if (!item.isFormField()) {// 過濾掉表單中非檔案域String fileType = item.getName().substring(item.getName().lastIndexOf(".") + 1).toLowerCase();//檔案類型String fileName = new Date().getTime() + "." + fileType; //儲存的檔案名稱String filePath = savePath + "\\" + fileName; //儲存的檔案路徑BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 獲得檔案輸入資料流BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(new File(filePath)));// 獲得檔案輸出資料流Streams.copy(in, out, true);// 開始把檔案寫到指定的上傳檔案夾retMsg += "上傳檔案成功。";in.close();out.close();} else { retMsg += "您輸入了:" + new String(item.getString().getBytes("iso-8859-1"),"utf-8");}}}response.setContentType("text/html;charset=utf8");PrintWriter pw = response.getWriter();pw.print(retMsg);pw.flush();pw.close();} catch (Exception e) {e.printStackTrace();}}}最後效果：
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
