快捷導(dǎo)航

Ajax提交Form表單及文件上傳的實(shí)例代碼

更新時(shí)間：2016年10月12日 14:16:50 作者：Jay922

前段時(shí)間在做程序的時(shí)候發(fā)現(xiàn)一個(gè)小問(wèn)題，在寫后臺(tái)管理上傳圖片時(shí)，在我進(jìn)行用Form表單提交的時(shí)候直接跳出來(lái)提交返回值的頁(yè)面并且原先的頁(yè)面刷新，下面小編通過(guò)分享本文給大家解析下

前幾天，發(fā)現(xiàn)了一些小問(wèn)題。我在寫后臺(tái)管理頁(yè)面時(shí)，需要上傳一張圖片。于是我就用很普通的Form表單上傳有一段Json串和圖片文件；

Form表單上傳圖片只需要在<form>標(biāo)簽里加上enctype = 'multipart/form-data'，這樣是可以上傳圖片的；

但問(wèn)題來(lái)了，在我進(jìn)行用Form表單提交的時(shí)候直接跳出來(lái)提交返回值的頁(yè)面并且原先的頁(yè)面刷新；

這樣我們可以先到異步的Ajax可以實(shí)現(xiàn)局部刷新；

廢話不多說(shuō)了直接上代碼；

首先是html：

<form id = "form_insert" method = "post">
<table style = "font-size: 13px; margin: 13px auto;"> 
<tr>
<td style = "text-align: right;">類型</td>
<td>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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;">開始時(shí)間</td>
<td>:&nbsp;&nbsp;<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;">結(jié)束時(shí)間</td>
<td>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<input class = "easyui-filebox" name = 'photo' style = "width:153px" data-options = "required:true,prompt:'選擇上傳圖片',buttonText:'&nbsp;選&nbsp;擇&nbsp;'"></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>&nbsp;&nbsp;&nbsp;&nbsp;
<a class = "easyui-linkbutton" data-options = "iconCls:'icon-quxiao'" href = "javascript:void(0)" onclick = "window_open($('#insert_form'), 'close')">
取消
</a>&nbsp;&nbsp;&nbsp;&nbsp;
</div>

以上是html代碼，為了方便大家copy，css直接在標(biāo)簽里了；

有很多朋友想問(wèn)，為什么寫兩個(gè)form表單；

這是因?yàn)楦鶕?jù)后臺(tái)接收數(shù)據(jù)的需求，傳的是信息變成字符串和圖片；

首先把信息變成字符串；

再放到第二個(gè)Form表單里，細(xì)心地朋友發(fā)現(xiàn)在第二個(gè)form表單里<input>標(biāo)簽里style=“display：none”這是個(gè)隱藏的標(biāo)簽；

不錯(cuò)我是通過(guò)第一個(gè)form表單獲取的數(shù)據(jù)通過(guò)js變成字符串再放到隱藏的標(biāo)簽里；

這樣通過(guò)Ajax提交第二個(gè)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('警告','結(jié)束時(shí)間不能小于開始時(shí)間！','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, //第二個(gè)Form表單的內(nèi)容
　　　　　　　　processData : false,
　　　　　　　　contentType : false,
　　　　　　　　error : function(request) {
　　　　　　　　},
　　　　　　　　success : function(data) {
　　　　　　　　　　$('#box').datagrid('reload');
　　　　　　　　}
　　　　　　});
　　　　　　window_open($('#insert_form'), 'close');
　　　　}else {
　　　　　　$.messager.alert('警告' , '信息不完整!' , 'error');
　　　　}
　　}
});

大家看到了我用了FormData方法，說(shuō)真的這個(gè)在html5里實(shí)在是太好用了，上傳圖片都不用再寫enctype = 'multipart/form-data'；

以上所述是小編給大家介紹的Ajax提交Form表單及文件上傳的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: