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

Posted 淘小人官网

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 

以上是关于form.submit(回调函数)——引用jq-form.js的主要内容，如果未能解决你的问题，请参考以下文章

使用 submit() 方法提交表单时的回调

即使在从服务器获得响应后，失败函数也会得到回调

js表单提交和submit提交的区别

ie 360浏览器form.submit无法提交 chrome与FF可以

可以改变先前提交回调的$ form_state ['redirect']吗？

jQuery Ajax 表单提交