前端:
<%@ 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" οnchange="selectImage(this);" />
<br />
<input type="button" οnclick="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>