ajax无刷新方式上传附件带上传进度条

投稿人：在云端 2017-02-22

分类 :js ajax 总分类 :网站阅读 : 0 0条评论

PHP文件：06.php
AJAX文件：06json.html

06.php内容

<?php

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

    //附件存储位置、附件名称
    $path = "./upload/";
    $name = mt_rand(1000,9999).$_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";
    }

06json.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();

                //给AJAX设置上传附件事件
                xhr.upload.onprogress = function (evt) //xhr对象调用upload属性，upload属性调用onprogress事件
                {
                    //通过事件对象感知附件的上传情况
                    var loaded = evt.loaded;//已经上传大小
                    var total = evt.total; //总大小
                    var per = Math.floor((loaded/total)*100)+"%"; //已经上传百分比
                    document.getElementById('son').innerHTML = per;
                    document.getElementById('son').style.width = per;
                }

                xhr.onreadystatechange = function ()
                {
                    if(xhr.readyState == 4)
                    {
                        alert(xhr.responseText);
                    }
                }
                xhr.open('post','./06.php');
                xhr.send(fd);

                evt.preventDefault();
            }
        }
    </script>
    <style>
        #pat { width:440px; height:45px; border:5px solid grey;}
        #son { width:0%; height:45px; line-height:40px; background-color:lightblue; text-align:center;}
    </style>
</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>
    <div id="pat"><div id="son"></div></div>
    <p>头像：<input type="file" name="userpic" id="userpic"></p>
    <p><input type="submit" value="上传"></p>
</form>
</body>
</html>

最后~虽然这个进度条很简陋，但效果确实是这样的。

下一篇：dedecms发布文章排序按发布时间,不是更新时间

上一篇：ajax无刷新方式附件上传