Ajax フォーム送信とファイルアップロードのサンプルコード-jsチュートリアル-php.cn

Ajax フォーム送信とファイルアップロードのサンプルコード

韦小宝

リリース： 2018-05-14 15:09:53

オリジナル

3030 人が閲覧しました

少し前にプログラムに取り組んでいたときに、写真をアップロードするためにバックエンド管理のFormフォームを書いていたときに、Formを使用してフォームを送信すると、戻り値を送信するページがジャンプするという小さな問題を発見しました。以下に、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 はタグ内に直接記述されています。

多くの友人が、なぜ 2 つのフォームを作成するのか尋ねたいと考えています。

これは、バックグラウンドでデータを受信する必要に応じて、情報が

文字列に変換されるためです。それを 2 番目のフォームに入力します。2 番目のフォームのタグの style="display:none" が隠しタグであることに気付きました。最初のフォームを js 経由で文字列に変換し、それをタグ内に隠します。

この方法で、Ajax 経由で 2 番目のフォームフォームを送信できます:

$( &#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' を記述する必要はありません

上記は、エディター I が紹介した Ajax フォームの送信とファイルのアップロードのサンプルコードです。皆さんのお役に立てれば幸いです!