Ajax提交Form表單及文件上傳

本文轉載自查看原文 2016-10-12 13:45 1919 JavaWeb前端

剛剛申請下來的博客，寫得第一篇。有點小激動，本人以前是一名工業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'；

第一次寫博客，希望大家多提一些建議；

午休中。。。。。。。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [Ajax] 使用Ajax異步上傳圖片文件(非Form表單提交) vue實現form表單提交文件上傳 js_ajax模擬form表單提交_多文件上傳_支持單個刪除 Ajax模擬Form表單提交，含多種數據上傳 Ajax serialize()提交form表單不能上傳file類型 form表單文件上傳提交且接口回調顯示提交成功 Ajax和form表單提交區別？ form表單提交轉為ajax方式提交使用jquery.form.js提交表單上傳文件 jquery.form.js ajax提交上傳文件