目的：選擇圖片，進行圖片回顯之后將圖片保存到服務器上（PS:沒有使用任何插件，樣式很丑）
實現方式：
js+servlet+jsp的方式來實現
事先准備：
文件上傳處理在瀏覽器中是以流的形式提交到服務器端的，直接用Servlet獲取文件上傳的輸入流然后再解析里面的請求參數比較麻煩，一般采用apach組織提供的開源工具common-fileupload這個文件上傳組件，common-fileupload是依賴於common-io這個包的，所以還需要下載這個包。struts封裝的上傳功能就是基於它們
前台jsp代碼：
<form action="${pageContext.request.contextPath}/uploadHandleServlet" enctype="multipart/form-data" method="post"> <img id="picture" src="" width="106" alt=""> <br /> 上傳文件目錄：<input type="file" name="file" id='file' onchange="showPic(this)" /> <br /> <input type="submit" value="提交" /> </form>
給file控件綁定一個onchange事件，在前台寫js獲取file的地址，然后回顯（不同的瀏覽器以及版本在獲取file控件框里的方式可能有區別，要考慮兼容性問題，因此在2中寫ajax,從后台傳url的json數據過來，這種方式不用考慮兼容性問題）
<script type="text/javascript">
//圖片回顯+圖片格式+文件類型
function showPic(obj) {
var newPreview = document.getElementById('picture');
if (obj) {
//ie瀏覽器兼容
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
var path = document.selection.createRange().text;
var flag = judgeImgSuffix(path);
if (flag) {
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
} else {
alert("要求圖片格式為png,jpg,jpeg,bmp");
}
return;
}
//firefox瀏覽器兼容
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
newPreview.src = window.URL.createObjectURL(obj.files.item(0));
return;
}
newPreview.src = obj.value;
return;
}
newPreview.src = obj.value;
return;
}
}
function judgeImgSuffix(path) {
var index = path.lastIndexOf('.');
var suffix = "";
if (index > 0) {
suffix = path.substring(index + 1);
}
if ("png" == suffix || "jpg" == suffix || "jpeg" == suffix
|| "bmp" == suffix || "PNG" == suffix || "JPG" == suffix
|| "JPEG" == suffix || "BMP" == suffix) {
return true;
} else {
//alert("請上傳正確到的圖片格式");
return false;
}
}
</script>
serlet處理代碼
package http_homework; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.List; import java.util.UUID; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUploadBase; import org.apache.commons.fileupload.ProgressListener; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; public class UploadHandleServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { HttpSession session = request.getSession(); // 得到上傳文件的保存目錄，將上傳的文件存放於WEB-INF目錄下，不允許外界直接訪問，保證上傳文件的安全 String savePath = this.getServletContext().getRealPath("/WEB-INF/upload"); // 上傳時生成的臨時文件保存目錄 String tempPath = this.getServletContext().getRealPath("/WEB-INF/temp"); File tmpFile = new File(tempPath); if (!tmpFile.exists()) { // 創建臨時目錄 tmpFile.mkdir(); } // 消息提示 String message = ""; try { // 使用Apache文件上傳組件處理文件上傳步驟： // 1、創建一個DiskFileItemFactory工廠 DiskFileItemFactory factory = new DiskFileItemFactory(); // 設置工廠的緩沖區的大小，當上傳的文件大小超過緩沖區的大小時，就會生成一個臨時文件存放到指定的臨時目錄當中。 factory.setSizeThreshold(1024 * 100);// 設置緩沖區的大小為100KB，如果不指定，那么緩沖區的大小默認是10KB // 設置上傳時生成的臨時文件的保存目錄 factory.setRepository(tmpFile); // 2、創建一個文件上傳解析器 ServletFileUpload upload = new ServletFileUpload(factory); // 監聽文件上傳進度 upload.setProgressListener(new ProgressListener() { public void update(long pBytesRead, long pContentLength, int arg2) { System.out.println("文件大小為：" + pContentLength + ",當前已處理：" + pBytesRead); /** * 文件大小為：14608,當前已處理：4096 文件大小為：14608,當前已處理：7367 * 文件大小為：14608,當前已處理：11419 文件大小為：14608,當前已處理：14608 */ } }); // 解決上傳文件名的中文亂碼 upload.setHeaderEncoding("UTF-8"); // 3、判斷提交上來的數據是否是上傳表單的數據 if (!ServletFileUpload.isMultipartContent(request)) { // 按照傳統方式獲取數據 return; } // 設置上傳單個文件的大小的最大值，目前是設置為1024*1024字節，也就是1MB upload.setFileSizeMax(1024 * 1024); // 設置上傳文件總量的最大值，最大值=同時上傳的多個文件的大小的最大值的和，目前設置為10MB upload.setSizeMax(1024 * 1024 * 10); // 4、使用ServletFileUpload解析器解析上傳數據，解析結果返回的是一個List<FileItem>集合，每一個FileItem對應一個Form表單的輸入項 List<FileItem> list = upload.parseRequest(request); for (FileItem item : list) { // 如果fileitem中封裝的是普通輸入項的數據 if (item.isFormField()) { String name = item.getFieldName(); // 解決普通輸入項的數據的中文亂碼問題 String value = item.getString("UTF-8"); // value = new String(value.getBytes("iso8859-1"),"UTF-8"); System.out.println(name + "=" + value); } else {// 如果fileitem中封裝的是上傳文件 // 得到上傳的文件名稱， String filename = item.getName(); System.out.println(filename); if (filename == null || filename.trim().equals("")) { //session.setAttribute("image_path", filename); continue; } // 注意：不同的瀏覽器提交的文件名是不一樣的，有些瀏覽器提交上來的文件名是帶有路徑的，如： // c:\a\b\1.txt，而有些只是單純的文件名，如：1.txt // 處理獲取到的上傳文件的文件名的路徑部分，只保留文件名部分 filename = filename.substring(filename.lastIndexOf("\\") + 1); // 得到上傳文件的擴展名 String fileExtName = filename.substring(filename .lastIndexOf(".") + 1); // 如果需要限制上傳的文件類型，那么可以通過文件的擴展名來判斷上傳的文件類型是否合法 System.out.println("上傳的文件的擴展名是：" + fileExtName); // 獲取item中的上傳文件的輸入流 InputStream in = item.getInputStream(); // 得到文件保存的名稱 String saveFilename = makeFileName(filename); // 得到文件的保存目錄 String realSavePath = makePath(saveFilename, savePath); // 創建一個文件輸出流 FileOutputStream out = new FileOutputStream(realSavePath + "\\" + saveFilename); // 創建一個緩沖區 byte buffer[] = new byte[1024]; // 判斷輸入流中的數據是否已經讀完的標識 int len = 0; // 循環將輸入流讀入到緩沖區當中，(len=in.read(buffer))>0就表示in里面還有數據 while ((len = in.read(buffer)) > 0) { // 使用FileOutputStream輸出流將緩沖區的數據寫入到指定的目錄(savePath + "\\" // + filename)當中 out.write(buffer, 0, len); } // 關閉輸入流 in.close(); // 關閉輸出流 out.close(); // 刪除處理文件上傳時生成的臨時文件 // item.delete(); message = "文件上傳成功！"; } } } catch (FileUploadBase.FileSizeLimitExceededException e) { e.printStackTrace(); request.setAttribute("message", "單個文件超出最大值！！！"); request.getRequestDispatcher("/message.jsp").forward(request, response); return; } catch (FileUploadBase.SizeLimitExceededException e) { e.printStackTrace(); request.setAttribute("message", "上傳文件的總的大小超出限制的最大值！！！"); request.getRequestDispatcher("/message.jsp").forward(request, response); return; } catch (Exception e) { message = "文件上傳失敗！"; e.printStackTrace(); } session.setAttribute("message", message); response.sendRedirect(request.getContextPath()+"/message.jsp"); //request.getRequestDispatcher("/message.jsp").forward(request, response); } private String makeFileName(String filename) { // 2.jpg // 為防止文件覆蓋的現象發生，要為上傳文件產生一個唯一的文件名 return UUID.randomUUID().toString() + "_" + filename; } private String makePath(String filename, String savePath) { // 得到文件名的hashCode的值，得到的就是filename這個字符串對象在內存中的地址 int hashcode = filename.hashCode(); int dir1 = hashcode & 0xf; // 0--15 int dir2 = (hashcode & 0xf0) >> 4; // 0-15 // 構造新的保存目錄 String dir = savePath + "\\" + dir1 + "\\" + dir2; // upload\2\3 // upload\3\5 // File既可以代表文件也可以代表目錄 File file = new File(dir); // 如果目錄不存在 if (!file.exists()) { // 創建目錄 file.mkdirs(); } return dir; } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
補充知識點：
form表單enctype="multipart/form-data",form表單enctype(編碼類型)有三種，當要傳輸非文本框的數據時，應該用multipart/form-data，以二進制數據流的方式傳輸
window.navigator.userAgent.indexOf("Firefox") >= 1是js方式獲取瀏覽器的名稱，詳情可見博客：https://www.cnblogs.com/feng18/p/6562168.html
window.URL.createObjectURL(obj.files.item(0))是js獲取火狐上傳文件路徑的完整地址，IE又有它自己的一套
后台處理的java:
當表單設置為multipart/form-data傳輸數據時，不能用request.getParameter("xxx")來獲取數據了，因為它傳輸的是二進制文件了。
整體這么幾個步驟：1.創建DiskFileItemFactory文件上傳工廠，設置文件保存路徑，臨時路徑，緩沖區大小
2.創建ServletFileUpload文件解析對像，解析過程中可以監聽進度，解析字符編碼防止中文亂碼，設置上傳單個文件大小，總文件的大小
3.使用解析器對上傳內容進行解析，將其划分成普通數據和上傳文件（MP3，圖片，視頻等），在分別對其操作