这次给大家带来ajax怎样提交form表单与实现文件上传，ajax提交form表单与实现文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。

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

Form表单上传图片只需要在

标签里加上enctype = 'multipart/form-data'，这样是可以上传图片的；

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

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

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

首先是html：

类型	:
名称	:
开始时间	:
结束时间	:
省	:
市	:
门店	:
具体地址	:

上传图片

:

保存

取消

以上是html代码，为了方便大家copy，css直接在标签里了；

有很多朋友想问，为什么写两个form表单；

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

首先把信息变成字符串；

再放到第二个Form表单里，细心地朋友发现在第二个form表单里标签里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'；

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：