前端:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <body> <img id="image" src="" /> <br /> <input type="file" id="file" onchange="selectImage(this);" /> <br /> <input type="button" onclick="uploadImage();" value="提交" /> <script> //js进行图片预览 使用input标签来选择图片,使用FileReader读取图片并转成base64编码,然后发送给服务器。 var image = ''; function selectImage(file) { if (!file.files || !file.files[0]) { return; } var filepath = document.getElementById("file").value; //为了避免转义反斜杠出问题,这里将对其进行转换 var re = /(\\+)/g; var filename=filepath.replace(re,"#"); //对路径字符串进行剪切截取 var one=filename.split("#"); //获取数组中最后一个,即文件名 var two=one[one.length-1]; //再对文件名进行截取,以取得后缀名 var three=two.split("."); //获取截取的最后一个字符串,即为后缀名 var last=three[three.length-1]; if(last!="jpg"){ alert("请您上传jpg格式的图片!"); return; } var reader = new FileReader(); reader.onload = function(evt) { document.getElementById('image').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } function uploadImage() { $.ajax({ type : 'POST', url : 'uploadImageAjax?t_number=929144493', //请求路径以及传值 data : { image : image //这里传递的是base64编码 json格式 }, async : false, dataType : 'json' }); } </script> <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script> </body> </html>
后台:
package com.servlet; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.sql.Connection; 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 com.dao.TeacherDao; import com.util.DbUtil; import sun.misc.BASE64Decoder; public class UploadImageAjaxServlet extends HttpServlet { DbUtil dbUtil = new DbUtil(); TeacherDao teacherDao = new TeacherDao(); String base64 = null; String t_number = null; String filePath = "h:\\Image\\"; Connection con; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置字符编码为UTF-8,支持汉字显示 response.setCharacterEncoding("UTF-8"); String t_number = request.getParameter("t_number"); // 上传文件路径 base64 = request.getParameter("image");// 接受图片的Base64编码 System.out.println(base64); GenerateImage(base64, filePath + t_number + ".jpg"); } /** * 从Base64编码转换为图片文件 * * @param imgStr * @param imgFilePath * @return */ public static boolean GenerateImage(String imgStr, String imgFilePath) {// 对字节数组字符串进行Base64解码并生成图片 // 只允许jpg String header ="data:image/jpeg;base64,"; // 去掉头部(必须加这个,不然图片传输数据错误) imgStr = imgStr.substring(header.length()); if (imgStr == null) // 图像数据为空 return false; BASE64Decoder decoder = new BASE64Decoder(); try { // Base64解码 byte[] bytes = decoder.decodeBuffer(imgStr); for (int i = 0; i < bytes.length; ++i) { if (bytes[i] < 0) {// 调整异常数据 bytes[i] += 256; } } // 生成jpeg图片 OutputStream out = new FileOutputStream(imgFilePath); out.write(bytes); out.flush(); //System.out.println("1"); out.close(); return true; } catch (Exception e) { return false; } } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>TeacherInfoManage</display-name> <welcome-file-list> <welcome-file>login.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>uploadImageAjaxServlet</servlet-name> <servlet-class>com.servlet.UploadImageAjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>uploadImageAjaxServlet</servlet-name> <url-pattern>/uploadImageAjax</url-pattern> </servlet-mapping> </web-app>