JavaWeb ajax动态上传图片

最新推荐文章于 2021-03-19 09:38:24 发布

小乔美哒哒

最新推荐文章于 2021-03-19 09:38:24 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaWeb

本文链接：https://blog.youkuaiyun.com/weixin_42981803/article/details/94594200

JavaWeb 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用JavaWeb进行图片上传和显示的项目案例，包括servlet处理上传逻辑，jsp页面显示图片，以及前端使用jQuery和AJAX实现图片预览和上传功能。

前几天在写javaweb项目的时候，有一部分需要上传图片，并在网页上显示出来，参考了各位的代码后需要两个jsp文件和一个servlet实现。servlet用于获取上传图片并传到服务器，一个jsp为显示页面，另一个为从服务器得到图片。

主页面如下：

 <input name="txtPhoto" type="hidden" value="" id="photo">
    <div id="resume_edit_photo">
        <div id="showResult">
            <img src="showImg.jsp" id="face" style="width:100px;height:130px" alt="">  
            <div id="pat"><div id="son"></div></div>  
         </div> 
        <div style="float:left;text-align:left;margin-left:20px;width:150px;margin-top:20px;">  
                 
           <input type="file" id="file" value="选择本地图片" name="file" onchange="imgChange(this);" style="margin-top:10px;margin-bottom:10px;background-color:#ffffff;width:150px;"><br>  
            <button id="photo_button">上传图片</button>
                  <script>
		         $("#photo_button").click(function(){
			     var file_length_photo=Math.ceil($("#file")[0].files[0].size)/1024/1024;
			     var file_name_photo=$("#file").val();
			     var file_back_photo=file_name_photo.substr(file_name_photo.indexOf("."));
			     if(file_length_photo<=1)
			     {
				     if(file_back_photo=='.png'||file_back_photo=='.jpg'||file_back_photo=='.PNG'||file_back_photo=='.JPG')
				     {
				    	//图片上传
				    	var oMyForm = new FormData();
				    	oMyForm.append("username", $("#uuuser").val());
				    	oMyForm.append("file", $('#file')[0].files[0]);
				    	$.ajax({
				    	    url: '/WebFront/UploadImg',
				    	    type: 'POST',
				    	    data: oMyForm,
				    	    cache: false,
				    	    processData: false,
				    	    contentType: false,
				    	    async: false,
				    	    success: function (data) {
				    	    	alertify.alert(data);
				            }
				    	});
				    	
				     }
				     else
				     {
					      alertify.alert("照片格式必须为png或jpg!");
					      return false;
				      }				
			     }
			    else
			    {
				      alertify.alert("照片大小不能超过1M!");
				      return false;
			    }			
		      });
	             //选择图片后，修改html显示内容
	             function imgChange(obj){
	            	 var file = document.getElementById("file");
	            	 var imgUrl =window.URL.createObjectURL(file.files[0]);
	            	 var img =document.getElementById('face');
	            	 img.setAttribute('src',imgUrl); // 修改img标签src属性值
	             }
           </script>

showImg.jsp页面如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.io.*,DBUtils.UserImageUtils"%> 
<%@ page import="java.sql.*, javax.sql.*" %> 
<%@ page import="java.util.*,frontPageDao.UserImage"%> 
<%@ page import="java.math.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>展示图片</title>
</head>
<body>
<!-- Java代码 -->
<%
	Boolean flag = true;
	String username = null;
	if(session.getAttribute("username")==null){
		flag = false;
		response.sendRedirect("login.jsp");
	} else {
		username = session.getAttribute("username").toString();
		OutputStream outs = response.getOutputStream();
		try{
			

            /**
            *主要代码在下面
            **/

			if(UserImageUtils.IsExist(username)){
			UserImage user = UserImageUtils.findByName(username);
			out.clear(); 
			out = pageContext.pushBody();
			response.setContentType("image/jpeg");
			
			outs.write(user.getImage()); 
			outs.flush();
			} else{
				response.sendRedirect("Application/OnlineHr/Resource/images/avator.png");
			}
		}finally {
			outs.close();
		}
	}
%>
</body>
</html>

其中servlet如下：

package Servlet;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 org.apache.tomcat.util.http.fileupload.FileItem;
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;

import DBUtils.UserImageUtils;
import DBUtils.UserUtilsDao;
import frontPageDao.UserImage;

/**
 * Servlet implementation class UploadImg
 */
@WebServlet("/UploadImg")
public class UploadImg extends HttpServlet {
    //设置参数
	private static final long serialVersionUID = 1L;
	private static final int MEMORY_THRESHOLD   = 1024 * 1024 * 3;  // 3MB
	private static final int MAX_FILE_SIZE      = 1024 * 1024 * 40; // 40MB
	private static final String UPLOAD_DIRECTORY = "upload";
	private static final int MAX_REQUEST_SIZE   = 1024 * 1024 * 50; // 50MB
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UploadImg() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//防止乱码
        request.setCharacterEncoding("UTF-8");
		response.setHeader("Content-type", "text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		UserImageUtils dao = new UserImageUtils();
		UserImage user = new UserImage();
		
		String username = "";
		HttpSession session = request.getSession(true);
		if(session!=null) {
			username = session.getAttribute("username").toString();
			if(username!=null&&username!="") {
				user.setUsername(username);
				if (!ServletFileUpload.isMultipartContent(request)) {
					// 如果不是则停止
					out.println("Error: 表单必须包含 enctype=multipart/form-data");
					out.flush();
					return;
				}
				// 配置上传参数
				DiskFileItemFactory factory = new DiskFileItemFactory();
				// 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
				factory.setSizeThreshold(MEMORY_THRESHOLD);
				// 设置临时存储目录
				factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
				ServletFileUpload upload = new ServletFileUpload(factory);
				// 设置最大文件上传值
				upload.setFileSizeMax(MAX_FILE_SIZE);
				// 设置最大请求值 (包含文件和表单数据)
				upload.setSizeMax(MAX_REQUEST_SIZE);
				// 中文处理
				upload.setHeaderEncoding("UTF-8");
				// 构造临时路径来存储上传的文件
				// 这个路径相对当前应用的目录
				String uploadPath = getServletContext().getRealPath("./")+File.separator+UPLOAD_DIRECTORY;
				// 如果目录不存在则创建
				File uploadDir = new File(uploadPath);
				if (!uploadDir.exists()) {
					uploadDir.mkdir();
				}
				try {
					// 解析请求的内容提取文件数据
					@SuppressWarnings("unchecked")
					List<FileItem> formItems = upload.parseRequest(new ServletRequestContext(request));
					String pw  = formItems.get(0).getString();//直接获取了第一个挂载的普通文本
					
					System.out.println(pw);
					
					if (formItems != null && formItems.size() > 0) {
						// 迭代表单数据
						for (FileItem item : formItems) {
							// 处理不在表单中的字段
							if (!item.isFormField()) {
								String fileName = new File(item.getName()).getName();
								String filePath = uploadPath + File.separator + fileName;
								File storeFile = new File(filePath);
								item.write(storeFile);
								FileInputStream fis = new FileInputStream(storeFile);
								ByteArrayOutputStream bos = new ByteArrayOutputStream();
								byte[] image = new byte[1024];
								int len = -1;
								while((len = fis.read(image)) != -1) {
								    bos.write(image, 0, len);
								}
								byte[] images = bos.toByteArray();
								user.setImage(images);
								//上传图片
								if(dao.IsExist(username)==true) {
									if(dao.update(user)) {
										out.write("更新成功");
										System.out.println("更新成功");
									}else {
										out.write("更新失败");
									}
								} else {
									if(dao.insert(user)) {
										out.write("添加成功");
										System.out.println("添加成功");
									}else {
										out.write("添加失败");
									}
								}
								// 在控制台输出文件的上传路径
								//System.out.println(filePath);
								// 保存文件到硬盘
								//item.write(storeFile);//直接写出文件
							}/* else {
								//表单里的其他text
							}*/
						}
						out.println("上传成功");
					}
				} catch (Exception e) {
					e.printStackTrace();
					out.println("服务器错误！失败!");
				}
			}
			
			else {
				out.write("用户未登录");
			}
		}
		
	}

}