Ajax提交Form表单及文件上传

刚刚申请下来的博客，写得第一篇。有点小激动，本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发；

前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的Form表单上传有一段Json串和图片文件；

Form表单上传图片只需要在<form>标签里加上enctype = \'multipart/form-data\'，这样是可以上传图片的；

但问题来了，在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新；

这样我们可以先到异步的Ajax可以实现局部刷新；

废话不多说了直接上代码；

首先是html：

以上是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\'；

第一次写博客，希望大家多提一些建议；

午休中。。。。。。。