原生ajax+php上传图片效果

目的：利用ProgressEvents规范中的进度事件和php相结合实现图片格式的判断及上传。

前提理论：
有以下6个进度事件：
1.loadstart:在接收到响应数据的第一个字节时触发
2.progress:在接收响应期间持续不断地触
3.error:在请求发生错误时触发
4.abort:在因为调用abort()方法而终止连接时触发
5.load:在接收到完整的响应数据时触发
6.loadend:在通信完成或者触发error、abort或load事件后触发

我们先用PHP生成xml文件（注意xml的格式，xml格式要求相对严格，如果有错误则无法获取到xml响应内容），判断图片是否上传成功判断图片类型以及设置图片存放位置。
PHP代码：

<?php 
        $result=uploadImage($_FILES['image']);
        header('Content-type:text/xml');
        echo '<?xml version="1.0" encoding="utf-8" ?>';
        echo '<result>'.$result.'</result>';
    function uploadImage($file){
        //判断是否上传成功
        if($file['error']>0){
            return '<flag>error</flag><message>php1上传失败</message>';
        }
        //获取上传文件的类型
        $type=strchr($file['name'],'.');
        if($type!='.jpg'){
            return '<flag>error</flag><message>上传失败，只允许jpg扩展名</message>';

        }
        $filename=substr(uniqid(rand()),-6).'.jpg';
        //上传文件保存路径
        $filepath='./uploads/'.$filename;
        if(move_uploaded_file($file['tmp_name'],$filepath)){
            return '<flag>ok</flag><message>'.$filepath.'</message>';
        }else{
            return '<flag>error</flag><message>php上传失败</message>';
        }
    }   
 ?>

JS发送文件内容，在浏览器接收数据期间周期性地触发进度事件。获取响应数据，计算上传速度上传时间。
JS代码：

        var xhr;
        var ot;
        var oloaded;
        var form=document.getElementById("form");
        var progressBar = document.getElementById("progressBar");
        var percentageDiv = document.getElementById("percentage");
        var contentBar=document.getElementById("content-bar");
        //上传文件方法
        function UpladFile() {
            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
            var url = "good.php";           
            var fd = new FormData(form);             // FormData 对象
            //form.append("mf", fileObj); // 文件对象
            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            xhr.open("post", url); 
            xhr.onreadystatechange = function() { 
                if(xhr.readyState==4&&xhr.status==200){
                    console.log(xhr.responseXML);
                    var rptest=xhr.responseXML;
                    var flag=rptest.getElementsByTagName("flag")[0].childNodes[0].nodeValue;
                    var message=rptest.getElementsByTagName("message")[0].childNodes[0].nodeValue;
                    if(flag=="ok"){
                      var image=document.getElementById("image");
                      image.src=message;
                      xhr.onload = uploadComplete;               //请求完成
                      contentBar.style.display="block";
                    }
                    if(flag=="error"){
                        alert("上传失败,仅上传jpg格式图片");
                        contentBar.style.display="none";
                    }
                }
            }
            xhr.upload.onprogress = progressFunction;   
            xhr.upload.onloadstart = function(){          //上传开始执行方法
                ot = new Date().getTime();           //设置上传开始时间
                oloaded = 0;                   //设置上传开始时，以上传的文件大小为0
            };
            xhr.send(fd);                           
        }
        //上传进度实现方法，上传过程中会频繁调用该方法
        function progressFunction(evt) {
             if (evt.lengthComputable) {
                 progressBar.max = evt.total;
                 progressBar.value = evt.loaded;
                 percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
             }
            var time = document.getElementById("time");
            var nt = new Date().getTime();                  //获取当前时间
            var pertime = (nt-ot)/1000; 
            ot = new Date().getTime();                    //重新赋值时间，用于下次计算

            var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b       
            oloaded = evt.loaded;
            //上传速度计算
            var speed = perload/pertime;//单位b/s
            var bspeed = speed;
            var units = 'b/s';//单位名称
            if(speed/1024>1){
                speed = speed/1024;
                units = 'k/s';
            }
            if(speed/1024>1){
                speed = speed/1024;
                units = 'M/s';
            }
            speed = speed.toFixed(1);
            //剩余时间
            var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
            time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
              if(bspeed==0){
                 time.innerHTML = '上传已取消';
               }
              if(resttime=="0.0"){
                contentBar.style.display="none";
            }

        }
        function uploadComplete(evt) {
             alert("上传成功！");
        }
          //取消上传
        function cancleUploadFile(){
            xhr.abort();
        }

效果：