一糕簿、jquery.form.js下載地址
jquery.form.js下載地址
二怀挠、jquery.form.js使用方法如下:
函數(shù)名描述參數(shù)例子
ajaxForm()增加所有需要的事件監(jiān)聽器，為ajax提交表單做準(zhǔn)備撩匕。ajaxForm并不能提交表單鹰晨。在document的ready函數(shù)中，使用ajaxForm來為ajax提交表單進(jìn)行準(zhǔn)備止毕。單進(jìn)行準(zhǔn)備模蜡。接受0個(gè)或1個(gè)參數(shù)。參數(shù)可以是一個(gè)回調(diào)函數(shù)扁凛，也可以是一個(gè)Options對(duì)象忍疾。$("#formid").ajaxForm();
ajaxSubmit()使用ajax提交表單。接受0個(gè)或1個(gè)參數(shù)谨朝。參數(shù)可以是一個(gè)回調(diào)函數(shù)卤妒，也可以是一個(gè)Options對(duì)象。$("#formid").ajaxSubmit();
formSerialize()將表單串行化(或序列化)為一個(gè)查詢字符串字币。這個(gè)方法將返回以下格式的字符串：name1=value1&name2=value2则披。無$("#formid").formSerialize();
fieldSerialize()將表單的字段元素串行化(或序列化)為一個(gè)查詢字符串。當(dāng)只有部分表單字段需要進(jìn)行串行化（或序列化）時(shí)洗出，使用這個(gè)就很方便了士复。 返回以下格式的字符串：name=value1&name2=value2。無$("#formid").formSerialize();
fieldValue()返回匹配插入數(shù)組中的表單元素值翩活。該方法以數(shù)組的形式返回?cái)?shù)據(jù)阱洪。如果元素值被判定可能無效便贵，則數(shù)組為空。無$("#formid: password").fieldValue();
resetForm()將表單恢復(fù)到初始狀態(tài)冗荸。無$("#formid").resetForm();
clearForm()清除表單元素承璃。該方法將所有的text、password俏竞、textarea置空绸硕，清除select元素中的選定，以及所有radio按鈕和checkbox按鈕重置為非選定狀態(tài)魂毁。無$("#formid").clearForm();
clearFields()清除字段元素玻佩。只有部分表單元素需要清除時(shí)方便使用。無$("#formid .specialFields").clearFields();
三席楚、options對(duì)象參數(shù)：
參數(shù)描述默認(rèn)值
target指明頁面中由服務(wù)器響應(yīng)進(jìn)行更新的元素咬崔。元素的值可能被指定為一個(gè)
jQuery選擇器字>符串、一個(gè)jquery對(duì)象烦秩、一個(gè)DOM元素垮斯。
默認(rèn)值：null
url指定提交表單數(shù)據(jù)的URL。默認(rèn)值：表單的action屬性值
type指定提交表單數(shù)據(jù)的方法(method)："GET"或"POST"只祠。默認(rèn)值：GET
beforeSubmit表單提交前被調(diào)用的回調(diào)函數(shù)兜蠕。如果回調(diào)函數(shù)返回false表單將不被提
交∨浊蓿回調(diào)函數(shù)帶三個(gè)調(diào)用參數(shù)：數(shù)組形式的表單數(shù)據(jù)熊杨，jQuery表單對(duì)
象，以及傳入ajaxForm/ajaxSubmit中的Options對(duì)象盗舰。
默認(rèn)值：null
success表單成功提交后調(diào)用的回調(diào)函數(shù)晶府。然后dataType選項(xiàng)值決定傳回
responseText還是responseXML的值。
默認(rèn)值：null
dataType返回的數(shù)據(jù)類型：null钻趋、"xml"川陆、"script"、"json"其中之一蛮位。默認(rèn)值：null
resetForm表示如果表單提交成功是否進(jìn)行重置较沪。默認(rèn)值：null
clearForm表示如果表單提交成功是否清除表單數(shù)據(jù)。默認(rèn)值：null
四失仁、例子如下：
demo.html代碼如下：
01
02
03
04????
05????ajax表單處理
06
07
08????上傳圖片：
09????預(yù)覽圖片：
10
11
12
13
14????$('#banner').on('change',?function()?{
15????????if($("#mbanner").length?>?0)?{
16?
17????????}?else{
18????????????????$("#banner").wrap("");
19????????????????}
20???????/*ajax提交*/
21????????$("#mbanner").ajaxSubmit({
22??????????????dataType:?'json',
23??????????????beforeSend:?function()?{
24?
25??????????????},
26??????????????uploadProgress:?function(event,?position,?total,?percentComplete)?{
27?
28??????????????},
29??????????????success:?function(data)?{
30??????????????????if(data.result?==?'true')?{
31???????????????????????$('#banner_see').attr('src',data.img);
32??????????????????}?else{
33???????????????????????$('#banner').val("");
34?????????????????}
35?????????????},
36?????????????error:?function(xhr)?{
37????????????????????????
38?????????????}
39????????});
40???});
41
demo.php代碼如下：
01
02????if(file_exists("./".?$_FILES["banner"]["name"]))
03????{
04??????$arrRet=array(
05????????'result'=>'false'
06????????);
07??????
08????}
09????else
10????{
11??????$ret=move_uploaded_file($_FILES["banner"]["tmp_name"],"./".?$_FILES["banner"]["name"]);
12??????if($ret){
13??????????$arrRet=array(
14????????????'result'=>'true',
15????????????'img'=>?$_FILES["banner"]["name"]
16????????????);
17????????}else{
18????????????$arrRet=array(
19????????????????'result'=>'false'
20????????????);
21????????}
22????}
23????echojson_encode($arrRet);
24?>
結(jié)果如下圖：
本文標(biāo)題:?php使用jquery Form 實(shí)現(xiàn)頁面無刷新上傳圖片购对，并預(yù)覽圖片
固定鏈接:?http://www.tcode.me/article/749.html?來自淘代碼轉(zhuǎn)載請(qǐng)注明
