ajax非同步請求提交上傳圖片表單並預覽圖片
阿新 • • 發佈:2019-02-02
一、表單上傳檔案必須加上enctype="multipart/form-data",(以下是上傳檔案的表單)
<form action="<%=basePath%>UploadImage" method="post" id="uploadForm" enctype="multipart/form-data"> <input type="hidden" name="picture" value="uploadpic"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="18%" background="<%=basePath%>tab/images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">上傳照片</span></div></td> <td bgcolor="#FFFFFF"> <input type="file" id="pic" name="pic" /> <input type="button" value="上傳" onclick="doUpload();"> </td> </tr> </table> </form>
二、但是使用ajax直接提交表單的資料,在後臺會無法獲取,因為ajax無法上傳檔案,經過在網上查閱資料,發現使用ajax提交檔案表單必須按照如下程式碼:(上傳按鈕單擊事件)
三 處理上傳圖片的servlet<script type="text/javascript"> function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: '<%=basePath%>UploadImage' , /*這是處理檔案上傳的servlet*/ type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { document.getElementById("showpic").src="<%=basePath%>UploadImage?picture=showpic";/*這是預覽圖片用的,自己在檔案上傳表單外新增*/ }, error: function (returndata) { alert(returndata); } }); } </script>
package com.action; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.OutputStream; import javax.servlet.ServletException; import javax.servlet.annotation.MultipartConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import javax.servlet.http.Part; import com.google.gson.Gson; @WebServlet("/UploadImage") @MultipartConfig public class UploadImage extends HttpServlet { 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 { System.out.println("---這裡是上傳圖片的servlet----"); String picflag = request.getParameter("picture"); String picPath = null; if("uploadpic".equals(picflag)){ System.out.println("----上傳----"); Part part = request.getPart("pic");//前臺的檔案標籤的name,若ajax直接提交表單,這裡無法獲取 String file = part.getHeader("Content-Disposition"); //獲取檔名 String fileName = file.substring(file.lastIndexOf("=")+2, file.length()-1); System.out.println(fileName); //獲取專案的部署路勁 String basePath = getServletContext().getRealPath("/"); System.out.println(basePath); picPath = basePath+fileName; //上傳檔案到部署路勁 part.write(basePath+fileName); //將路徑存在session中方便下面顯示是用 request.getSession().setAttribute("PIC", picPath); //以下程式碼是使用了 AJax非同步請求時使用的 Gson gson = new Gson();//建立gson物件 response.setContentType("text/json;charset=utf-8");//設定響應的方式為json response.getWriter().print(gson.toJson("<font color=red>使用者名稱或密碼錯誤</font>")); // response.getWriter().write("<script>window.location.href='MyOffice/addPic.jsp';</script>"); }else if("showpic".equals(picflag)){ System.out.println("這裡是上傳圖片裡面顯示圖片的servlet"); //從前臺獲取圖片的路勁(部署專案的根路徑)此路勁必須包含到圖片, //如D:\My\SOFTWORE\apache-tomcat-7.0.52\wtpwebapps\imas\111.gif // String picPath = request.getParameter("picpath"); Object obj = request.getSession().getAttribute("PIC"); String picpath = null; if(obj != null && obj instanceof String){ picpath = (String) obj; } System.out.println(picpath); //以該路勁建立一個新檔案,只需要找到圖片的路勁就可以 File file = new File(picpath); response.setCharacterEncoding("gb2312"); response.setContentType("doc"); response.setHeader("Content-Disposition", "attachment; filename=" + new String(file.getName().getBytes("gb2312"),"iso8859-1")); System.out.println(new String(file.getName().getBytes("gb2312"),"gb2312")); OutputStream output = null; FileInputStream fis = null; try{ output = response.getOutputStream(); fis = new FileInputStream(file); byte[] b = new byte[1024]; int i = 0; while((i = fis.read(b))!=-1){ output.write(b, 0, i); } output.write(b, 0, b.length); output.flush(); response.flushBuffer(); } catch(Exception e){ System.out.println("Error!"); e.printStackTrace(); } finally{ if(fis != null){ fis.close(); fis = null; }if(output != null){ output.close(); output = null; } } } } }
四 效果圖
上傳前