ajax提交表单数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<form action="" method="post">
姓名： <input type="text" name="name" id="name" value="" />
性别： <input type="text" name="sex" id="sex" value="" />
学校： <input type="text" name="school" id="school" value="" />
头像： <input type="file" name="pic" id="pic" value="" />
<img id="myPic" src=""/>
<input type="button" id="btn" name="btn" value="提交"/>
</form>
</body>
<script type="text/javascript">
var myPic = document.getElementById("myPic");
var btn = document.getElementById("btn");
//创建一个 xhr 对象
var xhr = new XMLHttpRequest();
//数据加载成功之后
xhr.onload=function(){
// console.log(this.responseText);
myPic.src = this.responseText;
}
btn.onclick=function(){
//设置数据
var formData = new FormData();
formData.append("name",document.getElementById("name").value);
formData.append("sex",document.getElementById("sex").value);
formData.append("school",document.getElementById("school").value);
formData.append("pic",document.getElementById("pic").files[0]);
// console.log(document.getElementById("pic").files);
//open
xhr.open("POST","register.php");
//send
xhr.send(formData);
}
</script>
</html>

<?php
//首先上传头像如果头像上传不成功就认为注册失败

//获取文件
if(!empty($_FILES)){
    $strs = moveFile($_FILES["pic"]);
    //如果上传成功了就写入文件
    if($strs){
        $pf = fopen("record.txt","a+");
        
        $name = htmlspecialchars($_POST["name"]);
        $sex = htmlspecialchars($_POST["sex"]);
        $school = htmlspecialchars($_POST["school"]);
        
        $pic = $strs;
        $line = $name."|".$sex."|".$school."|".$pic."\n";
        fwrite($pf,$line);
        fclose($pf);
        echo $strs;
    }
}
//图片保存到指定的位置
    function moveFile($upload){
        if(!is_dir("images")){     // is_dir(file)函数判断指定的文件夹是否存在 file 是一个相对路径
                mkdir("images");         // mkdir()函数创建文件夹
        }
         if(is_uploaded_file($upload['tmp_name'])){   // 判断上传是不是通过HTTP POST上传的
            $str=stristr($upload['name'],'.');         // 获取文件后缀名称
            // strtotime()函数定义一个Unix时间戳
            $path="images/".$upload["name"];   // 定义上传文件的存储位置
            if(move_uploaded_file($upload['tmp_name'],$path)){   // 执行文件上传操作
                return $path;  // 返回文件路径
            }else{
                return false; //上传不成功返回false
            }
         }
    }

ajax提交表单数据

推荐阅读更多精彩内容