ajax提交表單、ajax實現文件上傳，有需要的朋友可以參考下。
方式一：利用from表單的targer屬性 + 隱藏的iframe 達到類似效果， 支持提交含有文件和普通數據的復雜表單
方式二：使用jquery的$.ajax({..})， 支持提交普通表單，但不支持含有文件的復雜表單; ($.post 或 $.get底層用的都是$.ajax)
方式三：使用jquery插件ajaxFileUpload.js， 支持上傳文件，但不支持提交表單
方式四：使用jquery.from.js，支持提交同時含有文件和普通數據的復雜表單
個人四種都用過, 更好喜歡第二種和第四種; 用第二種來解決ajax普通請求, 用第四種來解決文件上傳/表單提交; 不多說,上代碼
方式一: from + iframe
Test1.jsp：表單、iframe、提交表單
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>測試頁面1,創建表單、iframe、提交表單</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="..省略/jquery.1.8.2.min.js"></script> <script> $(function(){ //值得注意的是iframe會維護瀏覽器的歷史,瀏覽器的后退/前進將根據ifream的訪問歷史來變化,而非主頁面 $("#btn").click(function(){ var value = $("#pic").val(); if(Utils.isEmpty(value)){ alert("請選擇文件"); return false; } if(!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){ alert("文件格式錯誤"); return false; } $("#form0").submit(); }); }); </script> </head> <body> <form id="form0" method="post" action="..省略/uploadOrgPic.html" enctype="multipart/form-data" target="hiddenFrame" > 上傳頭像: <input type="file" name="imageVo.image" id="pic" /> <input type="button" value="提交" id="btn"/> </form> <div id="result"></div> <iframe src="about:bland;" id="hiddenFrame" name="hiddenFrame" style="display:none;" frameborder="0"></iframe> </body> </html>
Test2.jsp：后台處理完成后的跳轉頁面 (后台處理代碼此處就不貼了, 上傳文件相信大家都會的)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>測試頁面2，處理結果、返回父頁面</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script> window.onload = function(){ if(window.parent != window){ //檢查是否存在父窗口 var resultDiv= window.parent.document.getElementById("result"); resultDiv.innerHTML = '因為是測試,所以簡單的來這么一句話'; } } </script> </head> <body> </body> </html>
方式二:$.ajax({..})
值得注意的是: serialize()可通過序列化表單值,創建URL編碼文本字符串,但不支持文件上傳的表單
$.ajax({
url:你要請求的url鏈接, //默認為當前頁面url
aysnc:true, //是否異步,默認true
cache: true, //使用緩存,默認true
type: "POST", //請求方式,默認Get
dataType:'JSON', //預期服務器返回的數據類型 (若不指定jquery將根據HTTP包MIME信息來判斷) headers:{'ClientCallMode':'ajax'}, //添加頭部,也可通過beforeSend函數添加 data:$('#formid').serialize(), //要發送的數據,將自動轉換為請求字符串格式。 此處為表單序列化后生成的字符串 success: function(data) { //執行成功的回調函數 alert("success"); }, error: function(request) { //執行錯誤的回調函數(包含三個參數:XMLHttrRequest、錯誤信息、捕獲的異常對象) alert("error"); } });
方式三:使用jquery插件ajaxFileUpload.js，該方式提交時無需表單, 也提交不了表單, 只用於文件上傳
若在文件上傳同時還要傳遞其它的參數,通過設置data屬性即可實現; 但如果需要的參數過多, 則不建議使用這種方式, 個人更傾向於方式四
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajaxFileUpload上傳文件</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="..省略/jquery.js"></script> <script type="text/javascript" src="..省略/ajaxfileupload.js"></script> <script> $("#uploadFile").click(function(){ var value = $("#imageInput").val(); if(Utils.isEmpty(value)){ alert("請選擇文件"); return false; } if(!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){ alert("文件格式錯誤"); return false; } $.ajaxFileUpload({ url:'url', secureuri:false, //是否啟用安全提交,默認false dataType:'JSON', //預期服務器返回的數據類型 fileElementId:'imageInput', //文件域id值 data:{'name':'abc'}, //其它參數 success:function(data,status){ alert(data); }, error:function(data,status,_exception){ alert(_exception); } }); }); </script> </head> <body> 姓名: <input type="text" name="name"/><br/> 上傳頭像: <input type="file" id="imageInput" name="imageVo.image"/> <input type="button" value="上傳" id="uploadFile"/> </body> </html>
方式四：jquery.form.js
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>ajax上傳頭像</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="jquery.1.8.2.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> </head> <body> <!-- 包含文件和普通數據的表單 --> <form id="form0" method="post" action="" enctype="multipart/form-data"> 姓名: <input type="text" name="userInfo.userName" autocomplete="off"/> 頭像: <input type="file" name="imageVo.image" id="pic" /> <input type="button" value="提交" onclick="ajaxSubmitForm();"/> </form> </body> <script> function ajaxSubmitForm() { var value = $("#pic").val(); if (Utils.isEmpty(value)) { alert("請先選擇文件"); return false; } if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) { alert("文件格式錯誤"); return false; } var option = { url : '..省略/uploadOrgPic.ac', type : 'POST', dataType : 'json', headers : {"ClientCallMode" : "ajax"}, //添加請求頭部 success : function(data) { alert(JSON.stringify(data)); }, error: function(data) { alert(JSON.stringify(data) + "--上傳失敗,請刷新后重試"); } }; $("#form0").ajaxSubmit(option); return false; //最好返回false，因為如果按鈕類型是submit,則表單自己又會提交一次;返回false阻止表單再次提交 } </script> </html>