집 >웹 프론트엔드 >JS 튜토리얼 >Ajax로 양식을 제출하고 파일 업로드를 구현하는 방법

Ajax로 양식을 제출하고 파일 업로드를 구현하는 방법

php中世界最好的语言원래의: 2018-04-03 14:19:113689검색

이번에는 ajax를 사용하여 양식 제출 및 파일 업로드 구현 방법을 보여 드리겠습니다. ajax에서 양식 양식 제출 및 파일 업로드 구현에 대한 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 며칠 전, 몇 가지 사소한 문제를 발견했습니다. 배경관리 페이지 작성을 하다가 사진을 올려야 했는데요. 그래서 저는 매우 일반적인 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를 통해 두 번째 양식 양식을 제출할 수 있습니다.

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

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

이 기사의 사례를 읽은 후에는 더 흥미로운 정보를 얻으실 수 있을 것입니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!