How to submit form and implement file upload with ajax

This time I will show you how to submit a form form and implement it with ajaxFile upload, what are the notes for ajax to submit a form form and implement file uploading, the following is a practical case, Let’s take a look.

A few days ago, I discovered some minor problems. When I was writing the background management page, I needed to upload a picture. So I used a very common Form to upload a Json string and image files;

Form form to upload images, you only need to add enctype = 'multipart/form-data' in the

tag, like this You can upload pictures;

But here comes the problem. When I submit the form using the Form, the page that submits the return value will pop up directly and the original page will be refreshed;

In this way, we can arrive first Asynchronous Ajax can achieve partial refresh;

Without further ado, let’s go directly to the code;

First is the html:

<form id = "form_insert" method = "post">
<table style = "font-size: 13px; margin: 13px auto;"> 
<tr>
<td style = "text-align: right;">类型</td>
<td>:  <input id = "acttype" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">名称</td>
<td>:  <input id = "actname" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">开始时间</td>
<td>:  <input id = "actstarttime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">结束时间</td>
<td>:  <input id = "actendtime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">省</td>
<td>:  <input id ="mem_Province" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style="text-align: right;">市</td>
<td>:  <input id = "mem_City" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">门店</td>
<td>:  <input id = "mem_Shop" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">具体地址</td>
<td>:  <input id = "actadd" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
</table>
</form>
<form id = "form_sub" style = "font-size: 13px;">
<table style="font-size: 13px; margin: 13px auto;">
<tr>
<td style = "text-align: right;">上传图片</td>
<td>:  <input class = "easyui-filebox" name = &#39;photo&#39; style = "width:153px" data-options = "required:true,prompt:&#39;选择上传图片&#39;,buttonText:&#39; 选 择 &#39;"></td>
<td><input type = &#39;text&#39; id = "Item" name = &#39;item&#39; style = "display:none;"></td>
</tr>
</table>
</form>
<p style = "text-align:right; padding:2px 5px;">
<a id = "sub" class = "easyui-linkbutton" data-options = "iconCls:&#39;icon-ok&#39;" href = "javascript:void(0)">
保存
</a>    
<a class = "easyui-linkbutton" data-options = "iconCls:&#39;icon-quxiao&#39;" href = "javascript:void(0)" onclick = "window_open($(&#39;#insert_form&#39;), &#39;close&#39;)">
取消
</a>    
</p>

The above is the html code, for the convenience of everyone to copy, The css is directly in the tag;

Many friends want to ask why two form forms are written;

This is because according to the need to receive data in the background, the information transmitted becomes String and picture;

First turn the information into a string;

and then put it in the second Form form. A careful friend found that in the second form form The style="display:none" in the tag is a hidden tag;

Yes, I got the data through the first form and turned it into a string through js and then put it in the hidden tag. ;

In this way, you can submit the second Form form through Ajax;

js code:

$( '#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');
　　　　}
　　}
});

Everyone has seen that I used the FormData method. To be honest, this is HTML5 is really easy to use. You don’t need to write enctype = 'multipart/form-data' when uploading images;

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!

Recommended reading:

How to handle errors when Ajax transmits json format data to the background

ajax background success upload How to process json data

The above is the detailed content of How to submit form and implement file upload with ajax. For more information, please follow other related articles on the PHP Chinese website!