无刷新表单提交与文件上传-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        //javascript+ajax无刷新方式form表单提交
        window.onload = function(){
            var fm = document.getElementsByTagName('form')[0];
            //表单提交事件
            fm.onsubmit = function(evt){
                //① 收集用户输入的表单域信息[FormData]
                var fd = new FormData(fm);//普通表单域 + 上传文件域信息
                //② 并把收集的信息提交给服务器端[ajax]
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4){
                        alert(xhr.responseText);
                    }
                }
                xhr.upload.onprogress = function(evt){
                    //该事件每间隔100ms左右就执行一次，
                    //并可以通过事件对象感知附件信息
                    //附件已经上传大小
                    var lod = evt.loaded;
                    //附件总大小
                    var tal = evt.total;
                    //上传百分比
                    var per = Math.floor((lod/tal)*100) + "%";
                    //给son的div设置宽度百分比
                    document.getElementById('son').innerHTML= per;
                    document.getElementById('son').style.width = per;
                }
                xhr.open('post','./06.php');
                xhr.send(fd);
                //阻止浏览器form表单的提交动作
                evt.preventDefault();
            }
        }
        </script>
        <style type="text/css">
        #pat {width:460px; height:40px;border:4px solid blue;}
        #son {width:0; height:100%; background-color:lightblue;}
        </style>
    </head>
    <body>
        <h2>用户注册(无刷新方式附件上传)</h2>
        <form method="post" action="./1001.php">
            <p>用户名：<input type="text" id="mingzi" name="username" /></p>
            <p>密码：<input type="password" id="mima" name="userpwd" /></p>
            <p>邮箱：<input type="text" id="youxiang" name="useremail" /></p>
            <div id="pat"><div id="son"></div></div>
            <p>头像：<input type="file" id="touxiang" name="userpic" /></p>
            <p><input type="submit" value="注册" /></p>
        </form>
    </body>
</html>

<?php
//收集到：普通表单域信息 +  上传文件域信息
//echo "post:";
//print_r($_POST);
//echo "file:";
//print_r($_FILES);
if($_FILES['userpic']['error']>0){
    exit('附件有错误');
}
//附件上传逻辑
$path = "./upload/";
$name = date("YmdHis").'-'.mt_rand(1000,9999);//附件的名字
$name_arr =  explode('.',$_FILES['userpic']['name']);
$ext = ".".$name_arr[count($name_arr)-1]; //附件的后缀

$pathname = $path.$name.$ext;//附件真实路径名

if(move_uploaded_file($_FILES['userpic']['tmp_name'],$pathname)){
    echo "success";
}else{
    echo "fail";
}

实现文件上传进度条功能