实现文件上传，以及表单提交成功的回调函数

最新推荐文章于 2020-12-24 20:35:04 发布

jadethao

最新推荐文章于 2020-12-24 20:35:04 发布

阅读量382

点赞数

分类专栏： Servlet 文章标签： fileupload 文件上传图片上传表单提交回调函数

Servlet 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在项目中需要实现图片的上传，并且成功后返回图片上传保存路径，通过查找资料探索研究，实现了项目功能需求，记在这方便自己以后查阅，也为有同样需求的码友分享，功能实现比较简单，如果有好的建议和实现方法，还望多多指教。

[b]主要将实现一下两个功能：[/b]
1、使用commons-fileupload实现文件的上传（包括图片）；
2、使用jquery-form.js实现表单提交成功的回调函数。

页面设计fileupload.jsp：


<%@ 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传</title>
<script src="static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="static/js/jquery-form.js"></script>
<script type="text/javascript">
	function subimtBtn() {
		var form = $("form[name=fileForm]");
        var options  = {  
            url:'${pageContext.servletContext.contextPath}/servlet/imageUploadServlet',  
            type:'post',  
            success:function(data)  
            {  
                var jsondata = eval("("+data+")");
                if(jsondata.error == "0"){
	                var url = jsondata.url;
	                alert(url)
	                $("#img").attr("src",url);
                }else{
                	var message = jsondata.message;
                	alert(message);
                }
            }  
        };  
        form.ajaxSubmit(options);
		//$("#fileForm").submit();
	}
</script>
</head>
<body>
			<div class="modal-body">

				<form action='${pageContext.servletContext.contextPath}/servlet/imageUploadServlet' enctype="multipart/form-data" method="post" id="fileForm" name="fileForm">
					<input type="file" name="filename">
				</form>

			</div>

			<div class="modal-footer">
				<button class="btn btn-primary"  onclick="subimtBtn();">提交</button>
			</div>

	<div>
	 <img alt="img" src="" id="img">
	</div>
</body>
</html>

servlet实现：imageUploadServlet.java


package com.system.comtrol;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
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 net.sf.json.JSONObject;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


/**
 * Servlet implementation class ImageUploadServlet
 */
@WebServlet("/servlet/imageUploadServlet")
public class ImageUploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			PrintWriter out = response.getWriter();
			// 文件保存目录路径
			String savePath = request.getServletContext().getRealPath("/")+ "attached";
			// 文件保存目录URL
			String saveUrl = request.getContextPath() + "/attached";
			// 定义允许上传的文件扩展名
			HashMap<String, String> extMap = new HashMap<String, String>();
			extMap.put("image", "gif,jpg,jpeg,png,bmp");
			// 最大文件大小
			long maxSize = 1000000;
			response.setContentType("text/html; charset=UTF-8");

			if (!ServletFileUpload.isMultipartContent(request)) {
				out.println(getError("请选择文件。"));
				return;
			}
			// 检查目录
			File uploadDir = new File(savePath);
			if (!uploadDir.isDirectory()) {
				out.println(getError("上传目录不存在。"));
				return;
			}
			// 检查目录写权限
			if (!uploadDir.canWrite()) {
				out.println(getError("上传目录没有写权限。"));
				return;
			}

			String dirName = request.getParameter("dir");
			if (dirName == null) {
				dirName = "image";
			}
			if (!extMap.containsKey(dirName)) {
				out.println(getError("目录名不正确。"));
				return;
			}
			// 创建文件夹
			savePath += dirName + "/";
			saveUrl += dirName + "/";
			File saveDirFile = new File(savePath);
			if (!saveDirFile.exists()) {
				saveDirFile.mkdirs();
			}
			SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
			String ymd = sdf.format(new Date());
			savePath += ymd + "/";
			saveUrl += ymd + "/";
			File dirFile = new File(savePath);
			if (!dirFile.exists()) {
				dirFile.mkdirs();
			}

			FileItemFactory factory = new DiskFileItemFactory();
			ServletFileUpload upload = new ServletFileUpload(factory);
			upload.setHeaderEncoding("UTF-8");
			List items = upload.parseRequest(request);
			Iterator itr = items.iterator();
			while (itr.hasNext()) {
				FileItem item = (FileItem) itr.next();
				String fileName = item.getName();
				if (!item.isFormField()) {
					// 检查文件大小
					if (item.getSize() > maxSize) {
						out.println(getError("上传文件大小超过限制。"));
						return;
					}
					// 检查扩展名
					String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
					if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
						out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许"	+ extMap.get(dirName) + "格式。"));
						return;
					}

					SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
					String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
					try {
						File uploadedFile = new File(savePath, newFileName);
						item.write(uploadedFile);
					} catch (Exception e) {
						out.println(getError("上传文件失败。"));
						return;
					}

					JSONObject obj = new JSONObject();
					obj.put("error", 0);
					obj.put("url", saveUrl + newFileName);
					out.println(obj.toString());
				}
			}
		} catch (FileUploadException e1) {
			e1.printStackTrace();
		}

	}

	private String getError(String message) {
		JSONObject obj = new JSONObject();
		obj.put("error", 1);
		obj.put("message", message);
		return obj.toString();
	}

}

项目中依赖的主要jar：commons-fileupload-1.2.jar，commons-io-1.4.jar
主要的两个js文件：jquery.min.js，jquery-form.js
这些可以去网上下载，也可以在附件中下载。

jadethao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现文件上传，以及表单提交成功的回调函数

最近在项目中需要实现图片的上传，并且成功后返回图片上传保存路径，通过查找资料探索研究，实现了项目功能需求，记在这方便自己以后查阅，也为有同样需求的码友分享，功能实现比较简单，如果有好的建议和实现方法，还望多多指教。[b]主要将实现一下两个功能：[/b]1、使用commons-fileupload实现文件的上传（包括图片）；2、使用jquery-form.js实现表单提交成功...
复制链接

扫一扫