利用js实现无刷新上传头像（或文件）并显示进度条

无刷新上传原理：现在我们利用新技术FormData表单数据对象可以实现快速收集表单信息，普通表单域和上传文件域均可以收集，再结合ajax就可以实现无刷新上传。

那么怎样显示进度条呢？原来ajax对象有upload成员，该成员也是对象，构造器是XMLHttpRequestUpload，该upload对象本身有onprogress事件，每隔100ms就执行一次，同时会获取当前附件的上传情况，包括总大小，已上传大小信息。

下面直接贴代码：

(1)index.html

[html]view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>利用js的FormData对象快速收集表单信息及无刷新上传头像</title>  
    <style>  
        #pat{width:200px;height: 20px;  
            border-radius: 5px;  
            background-color: #ccc;  
            margin: 10px}  
        #son{width: 0;height: 100%;  
            background: #9cf;  
            text-align: center;  
            border-radius: 5px}  
    </style>  
</head>  
<body>  
<form enctype="multipart/form-data">  
    用户名:<input type="text" name="user"><br/>  
    密码:<input type="password" name="pass"><br/>  
    头像:<input type="file" name="file"><br/>  
    <input type="submit" value="提交" name="sub">  
</form>  
<div id="showResult" style="display: none">  
<p>ajax无刷新界面返回结果：</p>  
用户名：<input type="text" id="user" disabled="disabled"><br/>  
  密码：<input type="text" id="pass" disabled="disabled"><br/>  
  头像：<img src="" id="face" style="width:200px;height:200px">  
        <div id="pat"><div id="son"></div></div>  
</div>  
<script type="text/javascript">  
        var fm=document.getElementsByTagName('form')[0];  
        fm.onsubmit=function () {  
            //实例化 FormData对象，同时收集表单的信息，包括普通表单域和文件表单域的信息  
            var fd=new FormData(fm);  
            var xhr=new XMLHttpRequest();  
            xhr.onreadystatechange=function () {  
                if(xhr.readyState==4){  
                    eval("var info="+xhr.responseText); //将json信息转化成js对象  
                    var result=document.getElementById("showResult"),  
                        user=document.getElementById("user"),  
                        pass=document.getElementById("pass"),  
                        face=document.getElementById("face");  
                    result.style.display='block';  
                    user.value=info.user;  
                    pass.value=info.pass;  
                    face.setAttribute("src",info.face);  
                }  
            };  
            xhr.upload.onprogress=function (evt) {   //事件监听器，获取上传的情况  
                var loaded=evt.loaded,  //已上传的大小  
                    total=evt.total,  //总大小  
                    per=Math.floor((loaded/total)*100)+'%', //转换成百分比  
                    son=document.getElementById("son");  
                son.innerHTML=per;  
                son.style.width=per;  
            }  
            xhr.open('post','./upload.php');    
            xhr.send(fd);   //发送数据  
            return false;   //阻止页面提交  
        }  
</script>  
</body>  
</html>  

(2)upload.php

[php]view plain copy
<?php  
  
$user=$_POST['user'];  
$pass=$_POST['pass'];  
$file=$_FILES['file'];  
foreach ($file as $key => $value) {  
    $$key=$value;  
}  
$path='face/'.time().strtolower(strstr($name, '.'));  //修改上传文件的名称,strstr($name, '.')是获取后缀名  
move_uploaded_file($tmp_name,$path);  
$path=strstr($path,$path[0]);  //图片的存储地址  
$arr=array(  
    "user"=>$user,  
    "pass"=>$pass,  
    "face"=>$path  
);  
$json=json_encode($arr);  //json编码  
echo $json;  
?>  

我们还得在同级目录下创建一个face文件夹，来保存上传的文件。

点击提交前效果如下：

利用js实现无刷新上传头像（或文件）并显示进度条

当我点击提交，就会显示下面效果：

利用js实现无刷新上传头像（或文件）并显示进度条

怎么样？酷炫吧~~~

如果要无刷新上传多张图片，那该怎么做呢？？

很简单，只要将这多张图片一张一张上传，最后返回这些图片的服务器最终存储地址就行啦！

利用js实现无刷新上传头像（或文件）并显示进度条

相关推荐