您的位置：首页 > Web前端 > JQuery

使用jQuery.form插件实现表单异步提交+上传文件

2014-03-11 10:27 1536 查看
1、前端代码

1
<!DOCTYPE
html>
2
<
html
>
3
<
head
>
4
<
meta
 
http-equiv
=
"Content-Type"
 
content
=
"text/html;
charset=UTF-8"
>
5
<
title
></
title
>
6
<
script
 
type
=
"text/javascript"
 
src
=
"js/jquery-1.7.2.min.js"
></
script
>
7
<
script
 
type
=
"text/javascript"
 
src
=
"js/jquery.form.min.js"
></
script
>
8
</
head
>
9
<
body
>
10
<
form
 
id
=
"fileForm"
 
method
=
"post"
 
enctype
=
"multipart/form-data"
 
action
=
"upload.php"
>
11
文件名称：<
input
 
name
=
"fileName"
 
type
=
"text"
><
br
/>
12
上传文件：<
input
 
name
=
"myfile"
 
type
=
"file"
><
br
/>
13
<
input
 
id
=
"submitBtn"
 
type
=
"submit"
 
value
=
"提交"
>
14
</
form
>
15
<
script
 
type
=
"text/javascript"
>
16
$(function(){
17
$("#fileForm").ajaxForm({
18
//定义返回JSON数据，还包括xml和script格式
19
dataType:'json',
20
beforeSend:
function() {
21
//表单提交前做表单验证
22
},
23
success:
function(data) {
24
//提交成功后调用
25
alert(data.message);
26
}
27
});
28
});
29
</
script
>
30
</
body
>
31
</
html
>
2、后端PHP代码

1
<?php
2
define(
'BASE_PATH'
,dirname(
__FILE__
));
3
4
move_uploaded_file(
$_FILES
[
'myfile'
][
'tmp_name'
],BASE_PATH.DIRECTORY_SEPARATOR.
'ufs'
.DIRECTORY_SEPARATOR.
$_FILES
[
'myfile'
][
'name'
]);
5
$name
 
=
$_POST
[
'fileName'
];
6
7
echo
 
"{\"message\":\"上传成功！$name\"}"
;
jquery.form插件是一个使用简单功能强大的表单异步上传插件，它提供了丰富的API和配置项来适应不同的需求。官方地址：http://jquery.malsup.com/form/。

1)、jquery.form可以包含的参数options

回调函数

beforeSerialize在表单序列化之前调用，默认值是：null

1
beforeSerialize:
function
($form,
options) {
2
//
return false 阻止表单提交
3
}
beforeSubmit在表单提交之前调用，可以表单验证放到该函数中。默认值：null

1
beforeSubmit:
function
(arr,
$form, options) {
2
//arr数组中包含表单中的数据，格式如下:
3
//
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
4
5
//
return false 取消表单提交
6
}
success 表单提交成功后的回调函数，函数包含的参数有，1: responseText 或responseXML 值，该值依赖与dataType属性的设置。2: statusText 返回状态文本。3: xhr或者是表单的jquery对象。4:表单的jquery对象。

uploadProgress 上传进度更新时调用的函数。

属性设置

clearForm Boolean值属性，表示是否在表单提交成功后情况表单数据

dataType 提交成果后返回的数据格式，可选值包括xml，json或者script

target 服务器返回信息去更新的页面对象，可以是jquery选择器字符串或者jquer对象或者DOM对象。

type 提交类型可以是”GET“或者”POST“

url 表单提交的路径

2)、使用ajaxForm

$(‘#myFormId’).ajaxForm(); 预处理表单提交。可以包含零个或一个参数，参数就是上面介绍的options。

3)、使用ajaxSubmit

调用后立即提交表单。也可以包含零个或者options参数。

1
$(
'#myFormId'
).submit(
function
()
{
2
//
提交表单
3
$(
this
).ajaxSubmit();
4
//
return false to prevent normal browser submit and page navigation
5
return
 
false
;
6
});
4)、formSerialize 序列化表单，并返回一个查询字符串，格式为name1=value1&name2=value2。

1
var
 
queryString
=$(
'#myFormId'
).formSerialize();
2
3
//可以使用
$.get, $.post, $.ajax,等方法提交这些数据
4
$.post(
'myscript.php'
,
queryString);
5)、fieldSerialize 用于序列化表单的一部分，返回一个字符串，格式为name1=value1&name2=value2。

1
var
 
queryString
=$(
'#myFormId
.specialFields'
).fieldSerialize();
6)、fieldValue 返回匹配表单的值，返回的是一个数组，如果没有匹配的值将返回空数组。

1
var
 
value
=$(
'#myFormId
:password'
).fieldValue();
2
alert(
'The
password is: '
 
+
value[0]);
7)、resetForm 重置表单元素的值。

1
$(
'#myFormId'
).resetForm();
8)、clearForm 清空表单元素的值，将清空所以表单的值。

1
$(
'#myFormId'
).clearForm();
9)、clearFields 清空选定属性的值。

1
$(
'#myFormId
.specialFields'
).clearFields();
更详细的请查看官方文档。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航