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

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

下载地址:http://download.csdn.net/detail/xiaole0313/8984223

主要将实现一下两个功能:

1、使用commons-fileupload实现文件的上传(包括图片);

2、使用jquery-form.js实现表单提交成功的回调函数。

页面设计fileupload.jsp:

Html代码

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

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("上传文件扩展名是不允许的扩展名。只允许" + 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

下载地址:http://download.csdn.net/detail/xiaole0313/8984223

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

相关推荐