关于jquery序列化表单的使用，以及jquery-ajax上传文件

最新推荐文章于 2023-02-01 18:20:37 发布
xuan323
最新推荐文章于 2023-02-01 18:20:37 发布
阅读量666
点赞数
本文链接：https://blog.csdn.net/leozhou13/article/details/50267139
版权
<%@ 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 type="text/javascript" src="js/jquery-1.11.3.min.js"></script>  
<script type="text/javascript" src="js/jquery.form.js"></script>  
<script type="text/javascript" src="js/jquery.json-2.2.js"></script>

<script type="text/javascript">

(function($){  
    $.fn.serializeJson=function(){  
        var serializeObj={};  
        var array=this.serializeArray();  
        var str=this.serialize();  
        $(array).each(function(){  
            if(serializeObj[this.name]){  
                if($.isArray(serializeObj[this.name])){  
                    serializeObj[this.name].push(this.value);  
                }else{  
                    serializeObj[this.name]=[serializeObj[this.name],this.value];  
                }  
            }else{  
                serializeObj[this.name]=this.value;   
            }  
        });  
        return serializeObj;  
    };  
})(jQuery);


</script>
  
<script type="text/javascript">

     function subimtBtn() {
         var param = $("#fileForm").serializeJson();
         //调用自己手动封装的方法，返回的是个js的数组对象还不是一个json串
         //要想返回一个json串还需使用jquery.json-2.2.js将数组对象转化为json串
         var params = $.toJSON(param);
         alert(params);
         
         //普通的ajax是不支持二进制文件上传的，所以这里要使用jquery.form.js，这样可以使用ajaxSubmit来提交带文件的表单
         /*
         可以将第一次序列化后的数组对象传入后台，其中包含了文件信息和普通的文本表单信息
         同时也可以将再次序列化的json串传入后台，也是包含了两者的信息，但是在后台使用apache的上传工厂是会多遍历json串
         该测试是在servlet作为后台进行测试的，框架的测试待续
         var serializeObj={};  
         var array=$("#fileForm").serializeArray();  
         //var str=$("#fileForm").serialize();  
         $(array).each(function(){  
             if(serializeObj[this.name]){  
                 if($.isArray(serializeObj[this.name])){  
                     serializeObj[this.name].push(this.value);  
                 }else{  
                     serializeObj[this.name]=[serializeObj[this.name],this.value];  
                 }  
             }else{  
                 serializeObj[this.name]=this.value;   
             }  
         }); */  
         
        
        /* var form = $("form[name=fileForm]");  
        var options  = {    
            //url:'UploadServlet',    
            url:'${pageContext.servletContext.contextPath}/servlet/UploadServlet',    
            type:'post',
            dataType:'json',
            success:function(data)    
            { 
                alert(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(); 
        
        $("#fileForm").ajaxSubmit({
            url:'UploadServlet',
            type:'post',
            data:params,
            dataType:'json',
            success:function(data){
                
                alert(data.success);
            }
        });
        
       /*  $.ajax({
            type:'post',
            url:'UploadServlet',
            data:params,
            dataType:'json',
            success:function(data){
                alert(data.success);
            }
            
        });  */
    }  
</script>  
</head>  
<body>  
            <div class="modal-body">  
                  
           <form action='' enctype="multipart/form-data" method="post" id="fileForm" name="fileForm">  
                    文件：<input type="file" name="filename"> <br> 
                    用户名：<input type="text" name="username" id="username"><br>
                    密码：<input type="password" name="password" id="password"><br>
                    年龄：<input type="text" name="age" id="age"><br>
                    邮箱：<input type="text" name="email" id="email"><br>
</form>  
                  
            </div>  
  
            <div class="modal-footer">  
                <button class="btn btn-primary"  οnclick="subimtBtn()">提交</button>  
            </div>  
  
    <div>  
     <img alt="img" src="" id="img">  
    </div>  
</body>  
</html>
结果图片
前端的json串：
序列化的数组
序列化的json串