form.submit(回调函数)——引用jq-form.js

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

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

主要将实现一下两个功能: 
1、使用commons-fileupload实现文件的上传(包括图片); 
2、使用jquery-form.js实现表单提交成功的回调函数。 

页面设计fileupload.jsp: 

jquery.form.js 点击下载

http://files.cnblogs.com/files/blogs2014/jquery.form.rar 

原文地址:https://www.cnblogs.com/blogs2014/p/5553635.html