ajax无刷新方式附件上传

PHP文件:05.php
AJAX文件:05json.html

05.php内容

<?php

    //判断附件是否有问题
    if($_FILES['userpic']['error']>0)
    {
        exit('附件有异常问题');
    }

    //附件存储位置、附件名称
    $path = "./upload/";
    $name = $_FILES['userpic']['name']; //附件原名称

    $truename = $path.$name;

    //把附件从临时路径,移动到真实位置move_uploaded_file()
    if(move_uploaded_file($_FILES['userpic']['tmp_name'],$truename))
    {
        echo "upload success";
    }else{
        echo "upload fail";
    }

05json.html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //加载事件里面给form设置提交事件
        window.onload = function ()
        {
            var fm = document.getElementsByTagName('form')[0];
            fm.onsubmit = function (evt)
            {
                //收集表单信息
                var fd = new FormData(fm); //也可以使用this(代表事件的元素节点对象)
                //ajax传递表单信息到服务器
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function ()
                {
                    if(xhr.readyState == 4)
                    {
                        alert(xhr.responseText);
                    }
                }
                xhr.open('post','./05.php');
                xhr.send(fd);

                evt.preventDefault();
            }
        }
    </script>
</head>
<body>
<h2>无刷新方式上传附件</h2>
<form action="./04.php">
    <p>用户:<input type="text" name="username" id="username"></p>
    <p>密码:<input type="password" name="userpwd" id="userpwd"></p>
    <p>邮箱:<input type="text" name="useremail" id="useremail"></p>
    <p>头像:<input type="file" name="userpic" id="userpic"></p>
    <p><input type="submit" value="注册"></p>
</form>
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND