Ajax 양식 제출 및 파일 업로드 예제 코드-JS 튜토리얼-php.cn

Ajax 양식 제출 및 파일 업로드 예제 코드

韦小宝

풀어 주다： 2018-05-14 15:09:53

원래의

3030명이 탐색했습니다.

얼마 전 프로그램 작업을 하다가 사진 업로드를 위해 백엔드 관리 Form 폼을 작성하던 중, Form을 이용해 폼을 제출했는데, 반환값을 제출한 페이지가 튕겨져 나가는 현상을 발견했습니다. 아래에서는 Ajax 제출 Form 양식 및 파일 업로드

의 예제 코드를 공유하여 분석해 보겠습니다. 며칠 전 작은 문제를 발견했습니다. 배경 관리 페이지 작성을 하다가 사진을 올려야 하는 일이 생겼습니다. 그래서 저는 매우 일반적인 Form을 사용하여 Json 문자열과 이미지 파일을 업로드했습니다.

Form 양식은 이미지를 업로드하므로

태그에 enctype = 'multipart/form-data'만 추가하면 됩니다. 이미지 ;

하지만 여기서 문제가 발생합니다. 양식을 제출할 때 반환 값을 제출하는 페이지가 바로 팝업되고 원본 페이지가 새로 고쳐집니다.

이러한 방식으로 먼저 비동기 Ajax를 사용하여 다음을 달성할 수 있습니다. 부분 새로 고침;

말도 안 됩니다. 더 이상 고민하지 말고 바로 코드로 넘어가겠습니다.

첫 번째는 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>

로그인 후 복사

위는 html 코드입니다. 복사의 편의를 위해 CSS는 태그에 직접 있습니다.

많은 친구들이 왜 두 가지 양식을 작성하는지 묻고 싶어합니다.

이는 백그라운드에서 데이터를 수신해야 하는 필요성에 따라 정보가

문자열 및 그림으로 전송되기 때문입니다.

정보를 문자열로 변환합니다. 그런 다음 두 번째 양식 양식에 넣으십시오. 두 번째 양식의 태그에 있는 style="display:none"이 숨겨진 태그라는 것을 발견했습니다. 첫 번째 양식을 js를 통해 문자열로 만든 다음 태그에 숨겨 두었습니다.

이 방법을 사용하면 Ajax를 통해 두 번째 양식 양식을 제출할 수 있습니다.

$( &#39;#sub&#39; ).click( function () {
　　var actTimeStart1 = $ (&#39;#actstarttime&#39;) . datebox (&#39;getValue&#39;);
　　var actTimeStart = changeDateToLong(actTimeStart1);
　　var actTimeEnd1 = $(&#39;#actendtime&#39;).datebox(&#39;getValue&#39;);
　　var actTimeEnd = changeDateToLong(actTimeEnd1);
　　if(actTimeStart != &#39;&#39; && actTimeEnd != &#39;&#39; && (actTimeStart - actTimeEnd > 0)){
　　　　$.messager.alert(&#39;警告&#39;,&#39;结束时间不能小于开始时间！&#39;,&#39;error&#39;);
　　　　return false;
　　}
　　else{
　　　　if ($(&#39;#form_insert&#39;).form(&#39;validate&#39;)) {
　　　　　　var actType = document.getElementById("acttype").value;
　　　　　　var actName = document.getElementById("actname").value;
　　　　　　var actArea = document.getElementById("actadd").value;
　　　　　　var actTimeStart1 = $(&#39;#actstarttime&#39;).datebox(&#39;getValue&#39;);
　　　　　　var actTimeStart = changeDateToLong(actTimeStart1);
　　　　　　var actTimeEnd1 = $(&#39;#actendtime&#39;).datebox(&#39;getValue&#39;);
　　　　　　var actTimeEnd = changeDateToLong(actTimeEnd1);
　　　　　　var t2 = $(&#39;#mem_Shop&#39;).combobox(&#39;getValue&#39;);
　　　　　　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&#39;, //http://www.cnblogs.com/jayxxxxxxx/
　　　　　　　　type : "post",
　　　　　　　　data : form, //第二个Form表单的内容
　　　　　　　　processData : false,
　　　　　　　　contentType : false,
　　　　　　　　error : function(request) {
　　　　　　　　},
　　　　　　　　success : function(data) {
　　　　　　　　　　$(&#39;#box&#39;).datagrid(&#39;reload&#39;);
　　　　　　　　}
　　　　　　});
　　　　　　window_open($(&#39;#insert_form&#39;), &#39;close&#39;);
　　　　}else {
　　　　　　$.messager.alert(&#39;警告&#39; , &#39;信息不完整!&#39; , &#39;error&#39;);
　　　　}
　　}
});

로그인 후 복사

솔직히 말하면 제가 FormData 메서드를 사용한 것을 모두가 보셨을 겁니다. , 이것은 html5에서 사용하기 정말 쉽습니다. 업로드 사진에는 enctype = 'multipart/form-data'를 작성할 필요가 없습니다.

위는 제가 소개한 Ajax Form 제출 및 파일 업로드의 예제 코드입니다. 모두에게 도움이 되길 바랍니다!