前幾天，發(fā)現(xiàn)了一些小問題。我在寫后臺管理頁面時，需要上傳一張圖片。于是我就用很普通的Form表單上傳有一段Json串和圖片文件；
Form表單上傳圖片只需要在form>標簽里加上enctype = 'multipart/form-data'，這樣是可以上傳圖片的；
但問題來了，在我進行用Form表單提交的時候直接跳出來提交返回值的頁面并且原先的頁面刷新；
這樣我們可以先到異步的Ajax可以實現(xiàn)局部刷新；
廢話不多說了 直接上代碼；
首先是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;">開始時間/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;">結束時間/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直接在標簽里了；
有很多朋友想問，為什么寫兩個form表單；
這是因為根據(jù)后臺接收數(shù)據(jù)的需求，傳的是信息變成字符串和圖片；
首先把信息變成字符串；
再放到第二個Form表單里，細心地朋友發(fā)現(xiàn)在第二個form表單里input>標簽里style=“display：none”這是個隱藏的標簽；
不錯我是通過第一個form表單獲取的數(shù)據(jù)通過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表單及文件上傳的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- jquery實現(xiàn)ajax提交form表單的方法總結
- jQuery實現(xiàn)form表單基于ajax無刷新提交方法詳解
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jquery的ajax提交form表單的兩種方法小結(推薦)
- Jquery基于Ajax方法自定義無刷新提交表單Form實例
- AJAX PHP無刷新form表單提交的簡單實現(xiàn)(推薦)
- 使用Ajax方法實現(xiàn)Form表單的提交及注意事項
- jQuery ajax提交Form表單實例(附demo源碼)
- 利用ajax提交form表單到數(shù)據(jù)庫詳解(無刷新)
