1. 程式人生 > >ajax非同步請求提交上傳圖片表單並預覽圖片

ajax非同步請求提交上傳圖片表單並預覽圖片

一、表單上傳檔案必須加上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提交檔案表單必須按照如下程式碼:(上傳按鈕單擊事件)

<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>
三 處理上傳圖片的servlet
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;
				}
			}

		}
		
		
	}

}

四 效果圖

上傳前