Ajax提交Form表單及檔案上傳的執行個體代碼_AJAX相關

前幾天，發現了一些小問題。我在寫後台管理頁面時，需要上傳一張圖片。於是我就用很普通的Form表單上傳有一段Json串和圖片檔案；

Form表單上傳圖片只需要在<form>標籤裡加上enctype = 'multipart/form-data'，這樣是可以上傳圖片的；

但問題來了，在我進行用Form表單提交的時候直接跳出來提交傳回值的頁面並且原先的頁面重新整理；

這樣我們可以先到非同步Ajax可以實現局部重新整理；

廢話不多說了 直接上代碼；

首先是html：

<form id = "form_insert" method = "post"><table style = "font-size: 13px; margin: 13px auto;"> <tr><td style = "text-align: right;">類型</td><td>:  <input id = "acttype" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">名稱</td><td>:  <input id = "actname" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">開始時間</td><td>:  <input id = "actstarttime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">結束時間</td><td>:  <input id = "actendtime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">省</td><td>:  <input id ="mem_Province" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr><td style="text-align: right;">市</td><td>:  <input id = "mem_City" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">門店</td><td>:  <input id = "mem_Shop" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr><td style = "text-align: right;">具體地址</td><td>:  <input id = "actadd" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td></tr></table></form><form id = "form_sub" style = "font-size: 13px;"><table style="font-size: 13px; margin: 13px auto;"><tr><td style = "text-align: right;">上傳圖片</td><td>:  <input class = "easyui-filebox" name = 'photo' style = "width:153px" data-options = "required:true,prompt:'選擇上傳圖片',buttonText:' 選 擇 '"></td><td><input type = 'text' id = "Item" name = 'item' style = "display:none;"></td></tr></table></form><div style = "text-align:right; padding:2px 5px;"><a id = "sub" class = "easyui-linkbutton" data-options = "iconCls:'icon-ok'" href = "javascript:void(0)">儲存</a>    <a class = "easyui-linkbutton" data-options = "iconCls:'icon-quxiao'" href = "javascript:void(0)" onclick = "window_open($('#insert_form'), 'close')">取消</a>    </div>

以上是html代碼，為了方便大家copy，css直接在標籤裡了；

有很多朋友想問，為什麼寫兩個form表單；

這是因為根據後台接收資料的需求，傳的是資訊變成字串和圖片；

首先把資訊變成字串；

再放到第二個Form表單裡，細心地朋友發現在第二個form表單裡<input>標籤裡style=“display：none”這是個隱藏的標籤；

不錯我是通過第一個form表單擷取的資料通過js變成字串再放到隱藏的標籤裡；

這樣通過Ajax提交第二個Form表單就可以了；

js代碼：

$( '#sub' ).click( function () {　　var actTimeStart1 = $ ('#actstarttime') . datebox ('getValue');　　var actTimeStart = changeDateToLong(actTimeStart1);　　var actTimeEnd1 = $('#actendtime').datebox('getValue');　　var actTimeEnd = changeDateToLong(actTimeEnd1);　　if(actTimeStart != '' && actTimeEnd != '' && (actTimeStart - actTimeEnd > 0)){　　　　$.messager.alert('警告','結束時間不能小於開始時間！','error');　　　　return false;　　}　　else{　　　　if ($('#form_insert').form('validate')) {　　　　　　var actType = document.getElementById("acttype").value;　　　　　　var actName = document.getElementById("actname").value;　　　　　　var actArea = document.getElementById("actadd").value;　　　　　　var actTimeStart1 = $('#actstarttime').datebox('getValue');　　　　　　var actTimeStart = changeDateToLong(actTimeStart1);　　　　　　var actTimeEnd1 = $('#actendtime').datebox('getValue');　　　　　　var actTimeEnd = changeDateToLong(actTimeEnd1);　　　　　　var t2 = $('#mem_Shop').combobox('getValue');　　　　　　var jsonObj = {actType:actType,actName:actName,actTimeStart:actTimeStart,actTimeEnd:actTimeEnd,actArea:actArea,t2:t2};　　　　　　var activityMemberJson = JSON.stringify(jsonObj);　　　　　　document.getElementById("Item").value=activityMemberJson;　　　　　　var form = new FormData(document.getElementById("form_sub"));　　　　　　$.ajax({　　　　　　　　url : ../activity/actionActivityInsert', //http://www.cnblogs.com/jayxxxxxxx/　　　　　　　　type : "post",　　　　　　　　data : form, //第二個Form表單的內容　　　　　　　　processData : false,　　　　　　　　contentType : false,　　　　　　　　error : function(request) {　　　　　　　　},　　　　　　　　success : function(data) {　　　　　　　　　　$('#box').datagrid('reload');　　　　　　　　}　　　　　　});　　　　　　window_open($('#insert_form'), 'close');　　　　}else {　　　　　　$.messager.alert('警告' , '資訊不完整!' , 'error');　　　　}　　}});

大家看到了我用了FormData方法，說真的這個在html5裡實在是太好用了，上傳圖片都不用再寫enctype = 'multipart/form-data'；

以上所述是小編給大家介紹的Ajax提交Form表單及檔案上傳的執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！