Ajax提交Form表单及文件上传的实例代码

网络编程 2024/12/26 佚名

3 1 2

前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的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>:&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表单；

这是因为根据后台接收数据的需求，传的是信息变成字符串和图片；

首先把信息变成字符串；

再放到第二个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表单及文件上传的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

ajax提交form表单上传,ajax提交form表单

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Ajax提交Form表单及文件上传的实例代码”

暂无评论...

Ajax提交Form表单及文件上传的实例代码

Ajax向后台传json格式的数据出现415错误的原因分析及解决方法

ajax跨页面提交表单

评论“Ajax提交Form表单及文件上传的实例代码”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接