Ajax提交Form表单及文件上传的实例代码
程序员文章站
2022-05-14 21:02:57
前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的form表单上传有一段json串和图片文件；
form表单上传图片只需要在
前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的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表单及文件上传的实例代码，希望对大家有所帮助