Ajax提交Form表单及文件上传的实例代码
前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的Form表单上传有一段Json串和图片文件；
Form表单上传图片只需要在<form>标签里加上enctype='multipart/form-data'，这样是可以上传图片的；
但问题来了，在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新；
这样我们可以先到异步的Ajax可以实现局部刷新；
废话不多说了直接上代码；
首先是html：
<formid="form_insert"method="post">
<tablestyle="font-size:13px;margin:13pxauto;">
<tr>
<tdstyle="text-align:right;">类型</td>
<td>: <inputid="acttype"style="width:150px"class="easyui-textbox"data-options="required:true"></td>
</tr>
<tr><tdcolspan="2"style="height:13px"></td>
</tr>
<tr>
<tdstyle="text-align:right;">名称</td>
<td>: <inputid="actname"style="width:150px"class="easyui-textbox"data-options="required:true"></td>
</tr>
<tr><tdcolspan="2"style="height:13px"></td>
</tr>
<tr>
<tdstyle="text-align:right;">开始时间</td>
<td>: <inputid="actstarttime"style="width:150px"class="easyui-datetimebox"data-options="required:true"></td>
</tr>
<tr><tdcolspan="2"style="height:13px"></td>
</tr>
<tr>
<tdstyle="text-align:right;">结束时间</td>
<td>: <inputid="actendtime"style="width:150px"class="easyui-datetimebox"data-options="required:true"></td>
</tr>
<tr><tdcolspan="2"style="height:13px"></td>
</tr>
<tr>
<tdstyle="text-align:right;">省</td>
<td>: <inputid="mem_Province"style="width:150px"class="easyui-combobox"data-options="required:true"></td>
</tr>
<tr><tdcolspan="2"style="height:13px"></td>
</tr>
<tr>
<tdstyle="text-align:right;">市</td>
<td>: <inputid="mem_City"style="width:150px"class="easyui-combobox"data-options="required:true"></td>
</tr>
<tr><tdcolspan="2"style="height:13px"></td>
</tr>
<tr>
<tdstyle="text-align:right;">门店</td>
<td>: <inputid="mem_Shop"style="width:150px"class="easyui-combobox"data-options="required:true"></td>
</tr>
<tr><tdcolspan="2"style="height:13px"></td>
</tr>
<tr>
<tdstyle="text-align:right;">具体地址</td>
<td>: <inputid="actadd"style="width:150px"class="easyui-textbox"data-options="required:true"></td>
</tr>
</table>
</form>
<formid="form_sub"style="font-size:13px;">
<tablestyle="font-size:13px;margin:13pxauto;">
<tr>
<tdstyle="text-align:right;">上传图片</td>
<td>: <inputclass="easyui-filebox"name='photo'style="width:153px"data-options="required:true,prompt:'选择上传图片',buttonText:' 选 择 '"></td>
<td><inputtype='text'id="Item"name='item'style="display:none;"></td>
</tr>
</table>
</form>
<divstyle="text-align:right;padding:2px5px;">
<aid="sub"class="easyui-linkbutton"data-options="iconCls:'icon-ok'"href="javascript:void(0)">
保存
</a>
<aclass="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(){
varactTimeStart1=$('#actstarttime').datebox('getValue');
varactTimeStart=changeDateToLong(actTimeStart1);
varactTimeEnd1=$('#actendtime').datebox('getValue');
varactTimeEnd=changeDateToLong(actTimeEnd1);
if(actTimeStart!=''&&actTimeEnd!=''&&(actTimeStart-actTimeEnd>0)){
$.messager.alert('警告','结束时间不能小于开始时间！','error');
returnfalse;
}
else{
if($('#form_insert').form('validate')){
varactType=document.getElementById("acttype").value;
varactName=document.getElementById("actname").value;
varactArea=document.getElementById("actadd").value;
varactTimeStart1=$('#actstarttime').datebox('getValue');
varactTimeStart=changeDateToLong(actTimeStart1);
varactTimeEnd1=$('#actendtime').datebox('getValue');
varactTimeEnd=changeDateToLong(actTimeEnd1);
vart2=$('#mem_Shop').combobox('getValue');
varjsonObj={actType:actType,actName:actName,actTimeStart:actTimeStart,actTimeEnd:actTimeEnd,actArea:actArea,t2:t2};
varactivityMemberJson=JSON.stringify(jsonObj);
document.getElementById("Item").value=activityMemberJson;
varform=newFormData(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表单及文件上传的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！