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

最新推荐文章于 2017-09-27 14:05:54 发布

yanchengyc

最新推荐文章于 2017-09-27 14:05:54 发布

阅读量5.5k

点赞数

分类专栏： js 文章标签： jquery rails

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、前端代码

 
<!DOCTYPE html>
 
<html>
 
<head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
    <title></title>
 
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
 
</head>
 
<body>
 
    <form id="fileForm" method="post" enctype="multipart/form-data" action="upload.php">
 
        文件名称：<input name="fileName" type="text"><br/>
 
        上传文件：<input name="myfile" type="file"><br/>
 
        <input id="submitBtn" type="submit" value="提交">
 
    </form>
 
    <script type="text/javascript">
 
        $(function(){
 
            $("#fileForm").ajaxForm({
 
                //定义返回JSON数据，还包括xml和script格式
 
                dataType:'json',
 
                beforeSend: function() {
 
                    //表单提交前做表单验证
 
                },
 
                success: function(data) {
 
                    //提交成功后调用
 
                    alert(data.message);
 
                }
 
            });
 
        });
 
    </script>
 
</body>
 
</html>

2、后端PHP代码

 
<?php
 
define('BASE_PATH',dirname(__FILE__));
 
 
 
move_uploaded_file($_FILES['myfile']['tmp_name'],BASE_PATH.DIRECTORY_SEPARATOR.'ufs'.DIRECTORY_SEPARATOR.$_FILES['myfile']['name']);
 
$name = $_POST['fileName'];
 
 
 
echo "{\"message\":\"上传成功！$name\"}";

jquery.form插件是一个使用简单功能强大的表单异步上传插件，它提供了丰富的API和配置项来适应不同的需求。官方地址：http://jquery.malsup.com/form/。

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

回调函数

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

 
beforeSerialize: function($form, options) {
 
    // return false 阻止表单提交
 
}

beforeSubmit在表单提交之前调用，可以表单验证放到该函数中。默认值：null

 
beforeSubmit: function(arr, $form, options) {
 
    //arr数组中包含表单中的数据，格式如下:
 
    // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
 
 
 
    // return false 取消表单提交
 
}

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参数。

 
$('#myFormId').submit(function() {
 
        // 提交表单
 
        $(this).ajaxSubmit();
 
        // return false to prevent normal browser submit and page navigation
 
    return false;
 
});

4)、formSerialize 序列化表单，并返回一个查询字符串，格式为name1=value1&name2=value2。

 
var queryString = $('#myFormId').formSerialize();
 
 
 
//可以使用 $.get, $.post, $.ajax,等方法提交这些数据
 
$.post('myscript.php', queryString);

5)、fieldSerialize 用于序列化表单的一部分，返回一个字符串，格式为name1=value1&name2=value2。

`1`	`var` `queryString = $('#myFormId .specialFields').fieldSerialize();`

6)、fieldValue 返回匹配表单的值，返回的是一个数组，如果没有匹配的值将返回空数组。

 
var value = $('#myFormId :password').fieldValue();
 
alert('The password is: ' + value[0]);

7)、resetForm 重置表单元素的值。

`1`	`$('#myFormId').resetForm();`

8)、clearForm 清空表单元素的值，将清空所以表单的值。

`1`	`$('#myFormId').clearForm();`

9)、clearFields 清空选定属性的值。

`1`	`$('#myFormId .specialFields').clearFields();`

更详细的请查看官方文档。

yanchengyc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery.form插件实现表单异步提交+上传文件

1、前端代码1<!DOCTYPE html>2html>3head>4 meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
复制链接

扫一扫