So senden Sie ein Formular und implementieren den Datei-Upload mit Ajax

Dieses Mal zeige ich Ihnen, wie Sie ein Formular absenden und den Datei-Upload mit Ajax implementieren. Das Folgende ist ein praktischer Fall. Vor ein paar Tagen habe ich einige kleinere Probleme entdeckt. 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

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.

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

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 hat, dass es wirklich einfach ist, sie in HTML5 zu verwenden. Sie müssen beim Hochladen von Bildern nicht enctype = 'multipart/form-data' schreiben Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie gehe ich mit Fehlern um, wenn Ajax Daten im JSON-Format in den Hintergrund überträgt?

Ajax-Hintergrund-Upload erfolgreich So verarbeiten Sie JSON-Daten

Das obige ist der detaillierte Inhalt vonSo senden Sie ein Formular und implementieren den Datei-Upload mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!