使用js监听php上传文件进度

 

php层 获取数据库中的数据并生成txt文件

exportFile.php        $model = M('' , '' , 'db_2015');

//获取传回参数 $_POST 略。。。
    
        //验证参数 略。。。

        //获取数据库数据 并处理
        
        //设置文件的排版格式
        if （ 以上报错 ） layerMsg( $dialogid , $msg )；
        


        //设置header 并输出文件
        $fileLen = strlen( $context );
    

        $filename = $data['site'].'-移仓-'.date('m-d').'.txt';
        header('Content-type: text/plain');
        header('Content-Disposition: attachment; filename="'.$filename.'"');
        header("Cache-Control: no-cache, must-revalidate"); //不缓存数据
        header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); 
        header("Content-Length: ".$fileLen); 
        echo $context; 
　
　　//在这使用的是提交表单到一个页面嵌套 的iframe框 下载文件 ，当前的page是原来的子级页面 所以当需要 操作iframe框的父级页面时 需要获取 iframe 的父级window对象来操作父级的函数
　　function layerMsg( $dialogid , $msg ){
        echo
        "<script>
            var win = self.parent.window;  //获取iframe的父级window 对象
            win.ajaxback_msg('0' ,'".$msg."' , '".$dialogid."'); //操作 iframe 的父级方法
            win.layerLoadEnd(); //操作iframe 的父级方法
        </script>";
        die;
        
    }                            

javascript 层 使用 XMLHttpRequest() 对象添加监听下载时间对象

　　//获取下载进度 
　　function getDownPrecent( pobj ){
    　　//新建一个xhr 对象 
   　　 var xhr = new XMLHttpRequest(),
        　　url = "{:U('exportFile')}"; //下载文件的路径
     　　//使用post方法提交       
    　　xhr.open('POST', url, true);
　　　　　//监听下载进度
   　　 xhr.addEventListener('progress', function (event) {
       　　 if (event.lengthComputable) {
            
           　　 var percentComplete = event.loaded / event.total;
　　　　　　　　　　//下载完成后需要的操作 ，这里是关闭 layer 的 加载层 并提示下载成功
          　　  if( percentComplete == 1 ) {
               　　 layerLoadEnd();
             　　   ajaxback_msg(1 , '下载完成' , 'dialog-export')
      　　      }
          
    　　    }
   　　 }, false);
    
　　　　//post方式提交需要构建一个表单 这里使用FormData对象构建
   　　 var formData = new FormData();

   　　 for( var zd in pobj ){
      　　  formData.append( zd , pobj[zd] );
   　　 }
    
　　　　//发送表单 
    　　xhr.send(formData);
　　
   　　//到这里js已经在循环监听文件的下载情况了

    
　　}

　　//点击导出文件触发这个函数
    function exportFile(){
        
        var pobj = {},
            url  = "{:U('exportFile')}",
            pobj = {},
            name = '',
            val  = '',
            isClose = true;
        
        $('#dialog-export').find('.qlnessary').each(function(){
            name = $.trim(this.getAttribute('ql-data-zd'));
            val  = this.value;
            pobj[name] = val;
        });
        
        //console.log( pobj ); return false;
        
        addIframeToDownFile( pobj, url, isClose )
        
    }

　　//提交数据下载文件 在iframe中下载
    function addIframeToDownFile( pobj, url, isClose ){
        if ( typeof(isClose) === 'undefined' ) isClose = 0;
        
        
        var nt = new Date().getTime() 
            ,down_iframe_name = 'post_down_frame_' + nt
            ,formId = 'post_down_form_' + nt
            ,val = ''
            ,div = null
            ,downFrom = null
            ,msg = ''
            ;
        
        var html = '<iframe src="" scrolling="no" id="' + down_iframe_name + '" name="' + down_iframe_name + '"\
                    style="position:fixed;height:0px;width:0px;padding:0px;margin:0px;top:-99999px;left:-99999px;"\
                    frameborder="0"></iframe>';
        
        html += '<form  id="' + formId + '" action="' + url + '" method="POST" target="' + down_iframe_name + '">' ;
        html += '<input type="hidden" name="iframeid" value="' + down_iframe_name + '">';
        for ( var zd in pobj ) {
            val = pobj[zd];

            if ( $.isArray(val) ) val = val.join(',');
            
            html += '<input type="hidden" name="' + zd + '" value="' + val + '">';
        }
     
        html += '</form>';
        
        div = document.createElement('DIV');
        div.className = 'qlhiddendiv';
        div.innerHTML = html;
        
        document.body.appendChild(div);
        
        downFrom = document.getElementById(formId);
        
        
        msg = (typeof(pobj) !== 'undefined' && typeof(pobj['isdown']) !== 'undefined' && pobj['isdown']) ? '' : '下载中';
        
        if ( downFrom ) {
            
            if ( msg ) {
                layerLoadStart( msg )    
            }
            
            downFrom.submit();
            getDownPrecent( pobj );
            
        }    
    }
    
//layer加载层开始 使用了layer 插件     
function layerLoadStart( msg ){
    
    if( typeof(_ql_.load_layer_index) === 'undefined' ) _ql_.load_layer_index = null;
    _ql_.load_layer_index = layer.msg(' ' + msg, {
        icon: 16
        ,time  : 0
        ,shade : [0.4,'#fff']
    });    
}

//layer 加载结束 使用了layer 插件
function layerLoadEnd(){
    if( typeof(_ql_.load_layer_index) === 'undefined' ) return false;
    layer.close( _ql_.load_layer_index );
}