php使用jquery Form ajax 提交表单,并上传文件

2020-05-21


1、jquery.form.js下载地址:http://malsup.com/jquery/form/#download


2、html代码

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>ajax表单处理</title>

</head>

<body>

    <form class="upForm" action="./data.php" method="post" enctype="multipart/form-data">

        <table>

            <tr>

                <td>用户名:</td>

                <td><input type="text" name="uname" /></td>

            </tr>

            <tr>

                <td>密码:</td>

                <td><input type="password" name="uname" /></td>

            </tr>

            <tr>

                <td>性别:</td>

                <td>

                    <input type="radio" name="sex" value="0" checked />男

                    <input type="radio" name="sex" value="0" />女

                </td>

            </tr>

            <tr>

                <td>证件:</td>

                <td><input type="file" name="upfile" /></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="button" value="提交" /></td>

            </tr>

        </table>

    </form>

</body>

<script type="text/javascript" src="?news/./jquery.js"></script>

<script type="text/javascript" src="?news/./jquery.form.min.js"></script>

<script type="text/javascript">

    $(function() {

        $(".upForm input[type='button']").on("click", function() {

            var options = {

                "beforeSubmit" : checkForm,

                "success" : resultForm,

                "resetForm" : true,

                "dataType" : "json"

            };

            $(".upForm").ajaxSubmit(options);

        });

 

        function checkForm(formData, form, options) {

            //表单提交前处理

        }

 

        function resultForm(data, status) {

            //表单完成

            console.log(data);

        }

    });

</script>

</html>

 

3、PHP代码

<?php

var_dump($_POST);

var_dump($_FILES);

?>


完成,有问题可以联系南宁网站建设公司技术总监!


0
首页
案例
关于
联系