ajax實現表單提交

2021-08-07 06:47:07 字數 4254 閱讀 3936

眾所周知現在的各大**基本都設有檔案上傳功能,使用者可以把自己喜歡的或其他檔案放在網上存起來,以便以後用的時候方便去找,可是乙個網頁的檔案上傳功能究竟該怎麼去設定呢?今天我就以上傳為例向大家展示檔案上傳功能的具體步驟。

其實檔案上傳有兩種方法,一種是from表單submit提交,一種是ajax實現非同步提交,可是form表單提交有個問題就是每次在上傳完成時會重新整理介面,不能實現非同步上傳,所以現在幾乎所有**都採用ajax非同步上傳,現在我給大家展示ajax非同步上傳該如何實現。

首先我先建立乙個form表單,**如下:

<formaction=""id="form">

使用者名稱:<inputtype="text"name="user"/>

密碼:<inputtype="password"name="pass"/>

性別:<inputtype="radio"name="***"value="男"/>男

<inputtype="radio"name="***"value="女"/>女

頭像:<inputtype="file"id="file"name="file"/>

<buttonid="btn"type="button">提交

<divclass="con">

建立完成後,首先我們要先拿到使用者從本上傳的的資訊,**如下

varimgs=;//儲存鏈結

//為檔案上傳新增change事件

varfilem=document.queryselector("#file");

$("#file").on("change",function()else

}

}

}

});

然後我們請求成功後,後台肯定要做出相應的處理,並且把存到指定的資料夾裡,所以相應的php應該完成這些操作:

<?php

//解決跨域問題

header("access-control-allow-origin:*");

//說明向前臺返回的資料型別為json

header("content-type:text/json");

//$_files超全域性變數儲存是檔案資料,是乙個關聯陣列

$fileobj=$_files['file'];

var_dump($fileobj);

if($fileobj["error"]==0)else

}else

echojson_encode($infor);

}

?>

附:如果上傳檔案時還要附帶上你的其它資訊,你只需再前端頁面請求完成後加上這段**即可實現:

//完成form表單資料的提交

$('#btn').on('click',function();

for(vari=0;ivarobj=infor[i];

stu[obj.name] = obj.value;

}

stu["imgs"] = imgs;

stu["imgs"] = imgs[0];

//傳送ajax請求

$.ajax(,

success:function(res)

});

});

ajax實現form表單提交

最終整理了一下 能夠完美實現要求。不重新整理提交表單,只提交一次,中文不亂嗎。html 部分 form input type text name link name id link name placeholder 如 言曌部落格 required required input type text ...

Ajax提交表單

class form group type text class form control placeholder 使用者名稱 required id username div class form group type password class form control placeholder...

Ajax表單提交例項

language vbscript codepage 65001 codepage必須為650001,否則也出現亂碼,如果有html文字,一定設為utf 8編碼,否則將出現亂碼.dim regid,regpassword,str regid request.form regid regpasswor...