需要的包
項目的演示
項目的根目錄
index.jsp
<body> <!-- 用來上傳圖片 --> <form action="${pageContext.request.contextPath }/uploadPic" method="post" enctype="multipart/form-data"> photo：<input type="file" name="photo"><br> <input type="submit" value="submit"> </form><br> <!-- 用來接收截取后的圖片 --> <div style="width:120px;height:120px;overflow:hidden;"> <img src="cutImage/${mess}" height="120px" width="120px"/> </div> </body>
對應的后台servlet代碼，uploadPic.java
package com.yunqing.servlet; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.text.SimpleDateFormat; import java.util.Date; import java.util.List; import java.util.Random; import javax.servlet.ServletException; 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.websocket.Session; import org.apache.tomcat.util.http.fileupload.FileItem; import org.apache.tomcat.util.http.fileupload.FileUploadException; import org.apache.tomcat.util.http.fileupload.RequestContext; import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory; import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload; import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext; public class uploadPic extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //得到文件上傳的保存目錄，放在WEB-INF下會更安全，但是不允許外界直接訪問，所以放在根目錄下的/image中 String fileSavePath=this.getServletContext().getRealPath("/image"); File file=new File(fileSavePath); //判斷文件夾是否存在 if(!file.exists()&&!file.isDirectory()){ //不存在則創建 file.mkdir(); } //轉發的消息 String message=""; //文件名+后綴名 String fileNameAndExt=""; try { //使用Apache文件上傳組件處理文件上傳步驟： //1、創建一個DiskFileItemFactory工廠 DiskFileItemFactory factory=new DiskFileItemFactory(); //2、創建一個文件上傳解析器 ServletFileUpload upload=new ServletFileUpload(factory); //解決上傳文件名的中文亂碼 upload.setHeaderEncoding("UTF-8"); //3、判斷提交上來的數據是否是上傳表單的數據 if(!ServletFileUpload.isMultipartContent(request)){ //按照傳統方式獲取數據 return; } //4、使用ServletFileUpload解析器解析上傳數據，解析結果返回的是一個List<FileItem>集合，每一個FileItem對應一個Form表單的輸入項 List<FileItem> list=upload.parseRequest((RequestContext) new ServletRequestContext(request)); for (FileItem fileItem : list) { //如果fileitem中封裝的是普通輸入項的數據 if(fileItem.isFormField()){//是普通的表單類型 String name=fileItem.getFieldName(); //解決普通輸入項的數據的中文亂碼問題 String value=fileItem.getString("UTF-8"); System.out.println(name+"="+value); }else{//不是普通的表單類型，file類型 //如果fileitem中封裝的是上傳文件 //得到上傳的文件名稱 String filename=fileItem.getName(); if(filename==null||"".equals(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 is=fileItem.getInputStream(); //FileOutputStream fos=new FileOutputStream(fileSavePath+"\\"+filename); StringBuffer fileSaveName=this.fileSaveName(); fileNameAndExt=fileSaveName+"."+fileExtName; System.out.println(fileNameAndExt); //創建一個文件輸出流 FileOutputStream fos=new FileOutputStream(fileSavePath+"\\"+fileSaveName+"."+fileExtName); //創建一個緩沖區 byte buffer[]=new byte[1024]; //判斷輸入流中的數據是否已經讀完的標識 int len=0; //len=is.read(buffer); //循環將輸入流讀入到緩沖區當中，(len=in.read(buffer))>0就表示in里面還有數據 while((len=is.read(buffer))>-1){ //使用FileOutputStream輸出流將緩沖區的數據寫入到指定的目錄(savePath + "\\" + filename)當中 fos.write(buffer, 0, len); } //關閉輸入流 is.close(); //關閉輸出流 fos.close(); //刪除處理文件上傳時生成的臨時文件 fileItem.delete(); message="文件上傳成功"; message=fileNameAndExt; } } } catch (FileUploadException e) { // TODO Auto-generated catch block message="文件上傳失敗"; e.printStackTrace(); } request.setAttribute("message", message); request.getRequestDispatcher("/message.jsp").forward(request, response); HttpSession hs=request.getSession(); hs.setAttribute("message", message); } /** * 給上傳的文件命名 * @return */ public StringBuffer fileSaveName(){ StringBuffer dname=new StringBuffer(); SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmssSSS"); Date d=new Date(); dname.append(sdf.format(d)); //生成四位隨機數 Random random = new Random(); for(int i=0;i<4;i++){ dname.append(random.nextInt(10)); } return dname; } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
截取的jsp頁面
<%@ page language="java" contentType="text/html; UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery-ui.min.js" type="text/javascript"></script> <script src="js/jquery.Jcrop.js" type="text/javascript"></script> <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" /> <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> </head> <body> <img src="image/${message}" id="cutPic"><br> <h2>剪切預覽：</h2> <div style="width:120px;height:120px;overflow:hidden;"> <img src="image/${message}" id="preview" class="jcrop-preview" height="120px" width="120px"/> </div><br> <form id="uploadSubForm" action="${pageContext.request.contextPath }/UploadSubImage" method="post"> <div> <input type="text" size="4" id="startX" name="startX" /> <input type="text" size="4" id="startY" name="startY" /> <input type="text" size="4" id="endX" name="endX" /> <input type="text" size="4" id="endY" name="endY" /> <input type="text" size="4" id="width" name="width" /> <input type="text" size="4" id="height" name="height" /> </div> <input type="submit" id="uploadBtn" name="uploadBtn" value="submit" onclick="uploadSubImage()"> </form> </body> <script type="text/javascript"> jQuery(function($){ var jcrop_api, boundx, boundy; $('#cutPic').Jcrop({ onChange: updatePreview, onSelect: updatePreview, aspectRatio: 1 },function(){ // Use the API to get the real image size var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; // Store the API in the jcrop_api variable jcrop_api = this; }); function updatePreview(c) { //得到坐標 $('#startX').val(c.x); $('#startY').val(c.y); $('#endX').val(c.x2); $('#endY').val(c.y2); $('#width').val(c.w); $('#height').val(c.h); //預覽效果 if (parseInt(c.w) > 0) { var rx = 120 / c.w; var ry = 120 / c.h; $('#preview').css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * c.x) + 'px', marginTop: '-' + Math.round(ry * c.y) + 'px' }); } }; //提交數據 function uploadSubImage() { document.getElementById('uploadSubForm').submit(); } }); </script> </html>
截取的后台操作的servlet
UploadSubImage.java
package com.yunqing.servlet; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletException; 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; public class UploadSubImage extends HttpServlet { //截取后的圖片 private static BufferedImage subImg; //轉發的消息 String mess=""; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { /*HttpSession hs=request.getSession(); hs.setAttribute("message", message);*/ //根據uploadPic中的上邊兩行代碼，得到源圖片文件的名稱+后綴名 HttpSession hs=request.getSession(); String str=hs.getAttribute("message").toString(); String srcFileName=this.getServletContext().getRealPath("/image")+"\\"+str.toString();//得到上傳的原圖地址 //得到后綴名 String Ext=srcFileName.substring(srcFileName.lastIndexOf(".")+1); //System.out.println(request.getParameter("startX")); //剪切后的圖片保存地址 String cutImgSavePath=this.getServletContext().getRealPath("/cutImage"); File file=new File(cutImgSavePath); if(!file.exists()&&!file.isDirectory()){ file.mkdir(); } //得到message.jsp傳過來的截取尺寸 int startX = Math.round(Float.parseFloat(request.getParameter("startX"))); int startY = Math.round(Float.parseFloat(request.getParameter("startY"))); int endX = Math.round(Float.parseFloat(request.getParameter("endX"))); int endY = Math.round(Float.parseFloat(request.getParameter("endY"))); int width = Math.round(Float.parseFloat(request.getParameter("width"))); int height = Math.round(Float.parseFloat(request.getParameter("height"))); System.out.println(startX + "==" + startY + "==" + endX + "==" + endY + "==" + width + "==" + height); //截圖 cut(srcFileName, startX, startY, width, height); //截圖后的圖片命名 String cutName=this.cutImgFileName().toString(); //保存 save(Ext, cutName, cutImgSavePath, width, height); //傳圖片名稱+后綴名 mess=cutName+"."+Ext; request.setAttribute("mess", mess); request.getRequestDispatcher("index.jsp").forward(request, response); } public static void cut(String srcFileName,int startX,int startY,int width,int height){ try { BufferedImage bufImg = ImageIO.read(new FileInputStream(srcFileName)); subImg=bufImg.getSubimage(startX, startY, width, height); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } public static void save(String imgExt,String imgName,String cutPath,int width,int height){ UploadSubImage u=new UploadSubImage(); try {/**壓縮圖片為指定尺寸*/ if(subImg.getWidth()!=width || subImg.getHeight()!=height){ BufferedImage tempImg = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); tempImg.getGraphics().drawImage(subImg.getScaledInstance(width, height, Image.SCALE_SMOOTH), 0, 0,null); ImageIO.write(tempImg, imgExt, new File(cutPath+"/"+imgName+"."+imgExt)); }else{ ImageIO.write(subImg,imgExt,new File(cutPath+"/"+imgName+"."+imgExt)); } } catch (IOException e) { e.printStackTrace(); } } public StringBuffer cutImgFileName(){ StringBuffer dname=new StringBuffer(); SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmssSSS"); Date d=new Date(); dname.append(sdf.format(d)); //生成四位隨機數 Random random = new Random(); for(int i=0;i<4;i++){ dname.append(random.nextInt(10)); } return dname; } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }