js上传图片到服务器并且预览图片

前端：

<%@ 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>

js上传图片到服务器并且预览图片

猜你喜欢