이번에는 ajax를 사용하여 양식 제출 및 파일 업로드 구현 방법을 보여 드리겠습니다. ajax에서 양식 양식 제출 및 파일 업로드 구현에 대한 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 며칠 전, 몇 가지 사소한 문제를 발견했습니다. 배경관리 페이지 작성을 하다가 사진을 올려야 했는데요. 그래서 저는 매우 일반적인 Form을 사용하여 Json 문자열과 이미지 파일을 업로드했습니다. Form 양식은 이미지를 업로드하므로 태그에 enctype = 'multipart/form-data'만 추가하면 됩니다. 이미지 ; 하지만 여기서 문제가 발생합니다. 양식을 제출하면 반환 값을 제출하는 페이지가 바로 팝업되고 원본 페이지가 새로 고쳐집니다. 이러한 방식으로 먼저 비동기 Ajax를 사용하여 다음을 달성할 수 있습니다. 부분 새로 고침; 말도 안 됩니다. 더 이상 고민하지 말고 바로 코드로 넘어가겠습니다. 첫 번째는 html입니다. 类型 : 名称 : 开始时间 : 结束时间 : 省 : 市 : 门店 : 具体地址 : 上传图片 : 保存 取消 로그인 후 복사 위는 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 중국어 웹사이트의 다른 관련 기사도 주목해주세요! 추천 자료: Ajax가 json 형식 데이터를 백그라운드로 전송할 때 오류를 처리하는 방법 Ajax 백그라운드에서 업로드한 json 데이터를 처리하는 방법 성공