Ajax 폼 및 파일 업로드 인 스 턴 스 코드 제출

7965 단어 ajaxform업로드
며칠 전에 작은 문 제 를 발 견 했 습 니 다.나 는 배경 관리 페이지 를 쓸 때 그림 을 한 장 올 려 야 한다.그래서 저 는 아주 일반적인 Form 폼 으로 JSon 꼬치 와 그림 파일 을 올 렸 습 니 다.
Form 폼 에 그림 을 올 리 려 면
태그 에 enctype='multipart/form-data'를 추가 하면 사진 을 올 릴 수 있 습 니 다.
그러나 문제 가 생 겼 습 니 다.제 가 Form 폼 으로 제출 할 때 반환 값 을 제출 하 는 페이지 를 직접 꺼 내 원래 의 페이지 를 새로 고침 합 니 다.
이렇게 하면 우 리 는 먼저 비동기 의 Ajax 에 가서 부분 적 인 리 셋 을 실현 할 수 있다.
잔말 말고 코드 올 리 기;
우선 html:

<form id = "form_insert" method = "post">
<table style = "font-size: 13px; margin: 13px auto;"> 
<tr>
<td style = "text-align: right;">  </td>
<td>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<input class = "easyui-filebox" name = 'photo' style = "width:153px" data-options = "required:true,prompt:'      ',buttonText:'&nbsp; &nbsp; &nbsp;'"></td>
<td><input type = 'text' id = "Item" name = 'item' style = "display:none;"></td>
</tr>
</table>
</form>
<div style = "text-align:right; padding:2px 5px;">
<a id = "sub" class = "easyui-linkbutton" data-options = "iconCls:'icon-ok'" href = "javascript:void(0)">
  
</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class = "easyui-linkbutton" data-options = "iconCls:'icon-quxiao'" href = "javascript:void(0)" onclick = "window_open($('#insert_form'), 'close')">
  
</a>&nbsp;&nbsp;&nbsp;&nbsp;
</div>
html 코드 입 니 다.여러분 의 편 의 를 위해 css 는 탭 에 직접 있 습 니 다.
많은 친구 들 이 왜 form 양식 두 개 를 썼 는 지 묻 고 싶 어 합 니 다.
배경 에서 데 이 터 를 받 는 수요 에 따라 정보 가 문자열 과 그림 으로 바 뀌 었 기 때문이다.
먼저 정 보 를 문자열 로 바 꾸 기;
두 번 째 Form 폼 에 넣 고 세 심하게 친 구 는 두 번 째 form 폼 에태그 에 style="display:none"이라는 숨겨 진 탭 을 발견 합 니 다.
좋 습 니 다.저 는 첫 번 째 form 폼 을 통 해 얻 은 데 이 터 를 js 를 통 해 문자열 로 바 꾸 어 숨겨 진 탭 에 넣 었 습 니 다.
이렇게 Ajax 를 통 해 두 번 째 Form 양식 을 제출 하면 됩 니 다.
js 코드:

$( '#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 방법 을 사용 한 것 을 보 셨 습 니 다.정말 html 5 에서 너무 좋 습 니 다.사진 을 올 리 면 enctype='multipart/form-data'를 쓰 지 않 아 도 됩 니 다.
위 에서 말 한 것 은 소 편 이 소개 한 Ajax 가 Form 양식 과 파일 에 올 린 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
iis 시작 의외 의 0x8ffe 2740 해결 방법
asp 는 새로운 정보 가 있 을 때 음성 알림 을 재생 하 는 효 과 를 실현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage