首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 其他教程 > 开源软件 >

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

2013-11-15 
实现文件上传,以及表单提交成功的回调函数最近在项目中需要实现图片的上传,并且成功后返回图片上传保存路

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

主要将实现一下两个功能:
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 method="post" id="fileForm" name="fileForm"><input type="file" name="filename"></form></div><div  onclick="subimtBtn();">提交</button></div><div> <img alt="实现文件上传,以及表单提交顺利的回调函数" 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";// 文件保存目录URLString 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
这些可以去网上下载,也可以在附件中下载。 1 楼 lsioui 2013-11-06   回调方法不用那么复杂,表单提交后自动调用这面这方法
$("#fileForm").ajaxForm(function(data){
//这样就可以拿到data了
}); 2 楼 jadethao 2013-11-06   lsioui 写道回调方法不用那么复杂,表单提交后自动调用这面这方法
$("#fileForm").ajaxForm(function(data){
//这样就可以拿到data了
});都一样的,我的分开写了,你的合在一起了。

热点排行