Ajax submit Form form and file upload instance code _ajax related

A few days ago, I found some minor problems. I need to upload a picture when I write the admin page. So I uploaded a JSON string and a picture file with a very common form form.

Form form upload picture only need to add enctype = ' multipart/form-data ' in <form> tag, this can upload picture;

But the problem is, when I submit the form form submission to jump directly to submit the return value of the page and the original page refresh;

So we can go to asynchronous Ajax to achieve local refresh;

Nonsense don't say more directly on the code;

The first is HTML:

<form id = "Form_insert" method = "POST" > <table style = "FONT-SIZE:13PX;" MARGIN:13PX auto; " > <tr> &LT;TD style = "text-align:right;" > type </td> <td>:  <input id = "Acttype" style = "width:150px" class = "Easyui-textbox" data-opt ions = "Required:true" ></td> </tr> <tr><td colspan = "2" style = "height:13px" ></td> ;/tr> <tr> <td style = "text-align:right;" > name </td> <td>:  <input id = "Actname" style = "width:150px" class = "Easyui-textbox" data-opt ions = "Required:true" ></td> </tr> <tr><td colspan = "2" style = "height:13px" ></td> ;/tr> <tr> <td style = "text-align:right;" > Start time </td> <td>:  <input id = "Actstarttime" style = "width:150px" class = " Easyui-datetimebox "data-options =" required:true "></td> </tr> <tr><td colspan =" 2 "style =" hei Ght:13px "&GT;&LT;/TD&GT </tr> <tr> <td style = "text-align:right;" > End time </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;" > Province </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;" > City </td> <td>:  <input id = "Mem_city" style = "width:150px" class = "Easyui-combobox" Data-op tions = "Required:true" ></td> </tr> <tr><td colspan = "2" style = "height:13px" ></td> &L t;/tr> <tr> <td style = "text-align:right;" > Stores </td> &LT;TD&GT;:&NBSP;&NBsp;<input id = "Mem_shop" style = "width:150px" class = "Easyui-combobox" data-options = "Required:true" ></td&gt
; </tr> <tr><td colspan= "2" style= "height:13px" ></td> </tr> <tr> <td style = " Text-align:right; " > Specific address </td> <td>:  <input id = "Actadd" style = "width:150px" class = "Easyui-textbox" Data-op tions = "Required:true" ></td> </tr> </table> </form> <form id = "Form_sub" style = "Font-siz e:13px; " > <table style= "FONT-SIZE:13PX; MARGIN:13PX auto; " > <tr> &LT;TD style = "text-align:right;" > Upload picture </td> <td>:  <input class = "Easyui-filebox" name = ' photo ' style = "width:153px" Data-o ptions = "required:true,prompt: ' Choose upload Picture ', ButtonText: '     optional   '" ></td> <td><input type = ' text ' id = ' item ' name = ' item ' style = ' display:none; ' ></td> </tr> </table> </form> <div style = "Text-align:right; PADDING:2PX 5px; " > <a id = "Sub" class = "Easyui-linkbutton" data-options = "iconcls: ' Icon-ok '" "href =" javascript:void (0) "> Save &L t;/a>     <a class = "Easyui-linkbutton" data-options = "iconcls: ' Icon-quxiao '" "href ="
Javascript:void (0) "onclick =" Window_open ($ (' #insert_form '), ' close ') ' > Cancel </a>     </div>

Above is the HTML code, in order to facilitate everybody copy,css directly in the label;

A lot of friends want to ask, why write two form form;

This is because the need to receive data in the background, the transmission of information into strings and pictures;

First, the information into a string;

In the second form, a careful friend finds that the style= "Display:none" in the second form form is a hidden label;

Yes, I am. The data obtained from the first form form is converted into a string by JS and then placed in a hidden label;

This way, the second form form can be submitted via 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 (' warning ', ' end time cannot be less than start time!
　　　　', ' 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,//second for M form content Processdata:false, Contenttype:false, error:function (Request) {}, Su
　　　　　　　　Ccess:function (data) {$ (' #box '). DataGrid (' reload ');
　　　　　　} 　　　　　　});
　　　　Window_open (' #insert_form '), ' close ');
　　　　}else {$.messager.alert (' warning ', ' information incomplete! ', ' error '); } 　　} });

We saw that I used the Formdata method, really this in the HTML5 is too good to use, upload pictures do not have to write enctype = ' multipart/form-data ';

The above is a small set of Ajax to introduce the form and file upload The example code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!