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

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

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

下面直接贴代码：

(1)index.html

    
    
    



    用户名:

    密码:

    头像:

    


ajax无刷新界面返回结果：
用户名：

  密码：

  头像：
        

(2)upload.php

 $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文件夹，来保存上传的文件。

点击提交前效果如下：

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

怎么样？酷炫吧~~~

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

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

代码传送门 ：https://github.com/lensh/AjaxFileUpLoad