Beispielcode für Ajax-Formularübermittlung und Datei-Upload

Ich habe vor einiger Zeit ein kleines Problem entdeckt, als ich an einem Programm arbeitete, als ich das Hintergrundverwaltungsformular Formular zum Hochladen von Bildern schrieb und es mit dem Formular Formular, die Seite, die den Wert zurückgibt, und die Originalseite werden aktualisiert. Nachfolgend teilt Ihnen der Editor den Beispielcode für die Ajax-Übermittlung Formular und Datei-Upload zur Analyse habe vor ein paar Tagen einige kleinere Probleme festgestellt. Als ich die Hintergrundverwaltungsseite schrieb, musste ich ein Bild hochladen. Daher habe ich ein sehr häufiges Formular zum Hochladen einer JSON-Zeichenfolge und einer Bilddatei verwendet. So können Sie Bilder hochladen.

Aber hier kommt das Problem. Wenn ich das Formular über das Formular absende, erscheint direkt die Seite zum Senden des Rückgabewerts und die Originalseite wird aktualisiert Auf diese Weise können wir zunächst eine teilweise Aktualisierung erreichen.

Kommen wir ohne weiteres zum Code

Zuerst ist der HTML-Code:

Das Obige ist der HTML-Code für Ihre praktische Kopie, CSS befindet sich direkt im Tag.

Viele Freunde möchten fragen, warum zwei Formulare geschrieben werden Beim Empfangen von Daten im Hintergrund werden die übertragenen Informationen

String

und

<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>

zuerst in einen String umgewandelt und dann in das zweite Formular eingefügt. Ein aufmerksamer Freund hat herausgefunden, dass im zweiten Formular das Tag „style="display:none" im Formular ein verstecktes Tag ist.

Ja, ich habe die Daten aus dem ersten Formular erhalten und umgedreht Fügen Sie es über js in einen String ein und fügen Sie es dann in das versteckte Tag ein. Auf diese Weise können Sie das zweite Formular über Ajax senden:

Jeder hat gesehen, dass ich die FormData-Methode verwendet habe und gesagt: Wirklich, das ist in HTML5 wirklich einfach. Sie müssen beim Hochladen von Bildern nicht enctype = 'multipart/form-data' schreiben Das Obige ist das vom Herausgeber eingeführte Ajax-Formular-Übermittlungsformular. Ich hoffe, es hilft allen!

Verwandte Empfehlungen:

Verwenden Sie das FormData-Objekt von HTML5, um Dateidaten asynchron über das Ajax-Formular zu übermitteln

JQuery Erstellen Sie eine AJAX-Formularübermittlungsinstanz für PHP

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

Implementieren Sie die Ajax-Formularüberprüfungsinstanz

Das obige ist der detaillierte Inhalt vonBeispielcode für Ajax-Formularübermittlung und Datei-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!