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

最新推荐文章于 2021-02-20 19:09:00 发布

weixin_34216196

最新推荐文章于 2021-02-20 19:09:00 发布

阅读量258

点赞数

文章标签： c/c++ java javascript ViewUI

原文链接：https://my.oschina.net/syso4yy/blog/398103

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

主要将实现一下两个功能：
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

转载于:https://my.oschina.net/syso4yy/blog/398103