java ajax非同步上傳檔案(文件、圖片都可以)
阿新 • • 發佈:2019-02-10
在寫專案的時候,經常用到圖片上傳啊什麼的,這兒提供一個方法,萬能,咋都能用。
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));
如果不需要,直接刪除即可。
這兩個操作在另外文章中。