Comment soumettre un formulaire et implémenter le téléchargement de fichiers avec ajax

Cette fois, je vais vous montrer comment soumettre un formulaire et mettre en œuvre le téléchargement de fichiers avec ajax Quelles sont les précautions pour soumettre un formulaire et mettre en œuvre le téléchargement de fichiers via ajax. Ce qui suit est un cas pratique.

Il y a quelques jours, j'ai découvert quelques problèmes mineurs. Lorsque j'écrivais la page de gestion de l'arrière-plan, j'avais besoin de télécharger une photo. J'ai donc utilisé un formulaire très courant pour télécharger une chaîne Json et des fichiers image ;

Formulaire pour télécharger des images, il vous suffit d'ajouter enctype = 'multipart/form-data' dans la balise

comme ça Vous pouvez télécharger des photos ;

Mais voici le problème. Lorsque je soumets le formulaire à l'aide du formulaire, la page de soumission de la valeur de retour apparaît directement et la page d'origine s'actualise ; De cette façon, nous pouvons arriver en premier. L'Ajax asynchrone peut réaliser un rafraîchissement partiel

Sans plus tarder, passons directement au code

Le premier est le HTML :

Ce qui précède est le code html, pour votre commodité, la copie et le css sont directement dans la balise

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

De nombreux amis veulent demander pourquoi deux formulaires sont écrits

C'est parce que selon l'exigence de ; recevant des données en arrière-plan, les informations transmises deviennent

Chaîne

et image transformez d'abord les informations en chaîne

puis mettez-les dans le deuxième formulaire A ; un ami prudent a découvert que dans le deuxième formulaire, le style="display:none" dans la balise du formulaire est une balise cachée

Oui, j'ai obtenu les données via le premier formulaire et je me suis retourné ; dans une chaîne via js, puis placez-le dans la balise cachée

De cette façon, vous pouvez soumettre le deuxième formulaire via Ajax ;

Tout le monde a vu que j'utilisais la méthode FormData et a dit que c'est vraiment facile de l'utiliser en HTML5. Vous n'avez pas besoin d'écrire enctype = 'multipart/form-data' lors du téléchargement d'images

Je crois ; vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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

Comment gérer les erreurs lorsque Ajax transmet des données au format json en arrière-plan

téléchargement réussi en arrière-plan ajax Comment traiter les données json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!