ajax跨域及文件上传进度条

ajax跨域及ajax上传文件进度条

// ajax实现跨域请求数据
    # http://www.c.com:8086下的ajax.html文件
        . if( window.XMLHttpRequest ){
        .    var xhr = new XMLHttpResuest();
        . }else{
        .    var xhr = new XDomainRequest();    //低版本IE兼容
        . }
        . xhr.open( "post","http://www.d.com:8086/ajax.php",true );
        . xhr.send();
        // 请求成功后执行的事件
        . xhr.onload = function(){
        .   alert( xhr.responseText );
        . };
    # http://www.d.com:8086/ajax.php
        // 允许原始域控制
        ***********新的XMLHttpRequest2.0版本功能***********
        . header( "Access-Control-Allow-Origin:http://www.c.com:8086" );
        . echo( "我是ajax跨域请求的数据" );


//ajax上传文件进度条（用到xhr2.0）
    //上传到后台，用php来处理。
    # upload.html
        . btn.onclick = function(){
        .     var xhr = new XMLHttpRequest();
        .     xhr.open( "post","upload.php",true );
        .     //使用二进制发送
        .     var formData = new FormData();
        .     formData.append( "file",myfile.files[0] );
        .     xhr.send( formData );
        .     //文件数据上传成功后
        .     xhr.onload = function(){
        .         var data = JSON.parse( this.responseText );
        .         console.log( data.code + ":" +data.msg );
        .     };
        .     //上传进度（加载）
        .     var upLoad = xhr.upload;
        .     upLoad.onprogress = function(ev){
        .         console.log(ev.total+":"+ev.loaded);
        .         var n = ev.loaded/ev.total;
        .         bg.style.width = 280 * n +"px";
        .         var con = n*100;
        .         txt.innerHTML = con.toFixed(2) + "%";
        .     };
        . };
    # upload.php
        <?php
            header('Content-type:text/html;charset = utf-8');

            //判断文件提交的方式
            if(strtolower($_SERVER['REQUEST_METHOD']) !='post'){
                exit_status(array('code' => 1,'msg' => '错误的提交方式'));
            }
            //判断是否上传成功
            //array_key_exists 检查给的键值是否存在于数组中
            //$_FLLES['file']['error'] == 0 代表上传成功 若果>0的话就是失败
            if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0){
                exit_status(array('code' => 0,'msg' => '文件上传成功'));
            }
            //若果上传不成功，返回错误信息
            exit_status(array('code' => 2,'msg' => '文件上传失败'));

            function exit_status($str){
                echo json_encode($str);//以json的格式来输出
                exit;
            }
        ?>