1. 程式人生 > >java ajax非同步上傳檔案(文件、圖片都可以)

java ajax非同步上傳檔案(文件、圖片都可以)

在寫專案的時候,經常用到圖片上傳啊什麼的,這兒提供一個方法,萬能,咋都能用。

ajax

$(".save-head").click(function () {
                		var formData = new FormData();
                 		formData.append('file', $('#upload')[0].files[0]);
                 		formData.append('school', '${userCenterJson.teacher.schoolCode }');
                 		formData.append('teacherCode', '${userCenterJson.teacher.teacherCode }');
                 		$.ajax({
             				url : '<%=SignAndMd5.uploadimg %>',
             				scriptCharset : "UTF-8",
             				contentType : "application/x-www-form-urlencoded; charset=UTF-8",
             				type : 'POST',
             				cache : false,
             				data : formData,
             				processData : false,
             				contentType : false,
             			}).done(function(data) {
             				alert("上載成功");
             				$("#headImg").val(data.trim());
             				$("#headform").submit();
             			}).fail(function(res) {
             				console.log(res.responseText);
             			});
                	 });

這邊對formData做一個解釋,其實這就是一個載體,有點像json一樣,用來傳資料的,但是他可以放著檔案資訊傳到後臺

我這邊傳了兩個值,用於動態拼裝檔案路徑,後臺獲取的程式碼這裡放一下:

String school = "";
        String teacherCode = "";
        
        while (iter.hasNext()) {
        	FileItem item = (FileItem) iter.next();
            item.getString("UTF-8");
            
            if (item.getFieldName().equals("school")) {
            	school = item.getString();
            	filePath += school + "//";
            	filePath += "TeacherHeadPic//";
            }
            if (item.getFieldName().equals("teacherCode")) {
            	teacherCode = item.getString();
            }
        }

我的ajax url為了方便直接是一個jsp,隨取隨用。
<%@page import="java.awt.Color"%>
<%@page import="com.kids.image.ImageUtils"%>
<%@page import="com.kids.picWork.ImgHandel"%>
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage=""%>
<%@ page import="java.util.List"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%
	request.setCharacterEncoding("UTF-8");

    String filePath = request.getRealPath("/SchoolCenter/") + "//";
    try {
        DiskFileItemFactory fu = new DiskFileItemFactory();
        fu.setSizeThreshold(2 * 1024 * 1024);
        fu.setSizeThreshold(4096);
        ServletFileUpload upload = new ServletFileUpload(fu);
        upload.setHeaderEncoding("UTF-8");
        List fileItems = upload.parseRequest(request); 
        Iterator iter = fileItems.iterator();
        String TextDate = "";
        
        String school = "";
        String teacherCode = "";
        
        while (iter.hasNext()) {
        	FileItem item = (FileItem) iter.next();
            item.getString("UTF-8");
            
            if (item.getFieldName().equals("school")) {
            	school = item.getString();
            	filePath += school + "//";
            	filePath += "TeacherHeadPic//";
            }
            if (item.getFieldName().equals("teacherCode")) {
            	teacherCode = item.getString();
            }
        }
        Iterator iter2 = fileItems.iterator();
        while (iter2.hasNext()) {
        	FileItem item = (FileItem) iter2.next();
            item.getString("UTF-8");
            //忽略其他不是檔案域的所有表單資訊
            
            if (!item.isFormField()) {
            	
                String name1 = item.getName();//獲取上傳的檔名
               
                long size = item.getSize();//獲取上傳的檔案大小(位元組為單位)
                if ((name1 == null || name1.equals("")) && size == 0) {
                    continue;//跳到while檢查條件
                }
                int end = name1.length();
                int begin = name1.lastIndexOf("\\");
                String newname = name1.substring(begin + 1, end);
                TextDate = newname;
                if (TextDate.length() == 0) {
                    System.out.println("上傳檔案匯入異常,請重新上傳...");
                } else {
                    try {
                        //儲存檔案
                        newname = teacherCode + "." + newname.split("\\.")[1];
                        
                        System.out.println(newname);
                        
                        File savedFile = new File(filePath, newname);//用原檔名,作為上傳檔案的檔名。
                        item.write(savedFile);
                        item.delete();
                        
                        new ImgHandel().thumbnailImage(filePath + newname, 150, 150, "thumb_", false);
                        
                		File f = new File(filePath + newname);
                		ImageUtils.fromFile(f)
                		.scale(1)
                		.rotate(90)		//旋轉角度
                		.quality(1)
                		.bgcolor(Color.white)
                		.toFile(new File(filePath + newname));
                        
                        out.println(newname);
				        out.flush();
				        out = pageContext.pushBody();
                    } catch (Exception e) {
                        out.println(e);
                    }
                }
            }
        }
        
    } catch (Exception e) {
        e.printStackTrace();
    }
%>

這裡的ajax對圖片有兩個處理,

一個是生成縮圖,

new ImgHandel().thumbnailImage(filePath + newname, 150, 150, "thumb_", false);


一個是旋轉上傳的圖片

 new ImgHandel().thumbnailImage(filePath + newname, 150, 150, "thumb_", false);
                        
                		File f = new File(filePath + newname);
                		ImageUtils.fromFile(f)
                		.scale(1)
                		.rotate(90)		//旋轉角度
                		.quality(1)
                		.bgcolor(Color.white)
                		.toFile(new File(filePath + newname));

如果不需要,直接刪除即可。

這兩個操作在另外文章中。