這次給大家帶來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中文網其它相關文章！

推薦閱讀：

總結

以上是生活随笔為你收集整理的ajax post form上传图片,ajax怎样提交form表单与实现文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。