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

最新推荐文章于 2022-05-07 18:59:52 发布

gaoshanliushui2009

最新推荐文章于 2022-05-07 18:59:52 发布

阅读量5.5k

点赞数

分类专栏： jq

jq 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

源自：http://www.v5cn.cn/?p=208

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。

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

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

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

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

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

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

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

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

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

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

gaoshanliushui2009

关注

0
点赞
踩
0

收藏

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

源自：http://www.v5cn.cn/?p=208 1、前端代码html>head> metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> title>title> scripttype="text/javascript"s
复制链接

扫一扫