使用html5实现文件上传进度条

浏览数：24 / 时间：2015年06月09日

html

 <div id="file">
      <input type="file" name="ver" id="ver"/>
      <font color="red">*(apk，ipa目前为自动重命名)</font><br />
      <div class="progress"><span class="bgpro"></span></div>
</div>

css
<style type="text/css">
    div.progress{width:400px;height:20px;border:1px solid blue;background:#fff;display:none;}
    span.bgpro{display:block;height:20px;background:blue;width:0px;text-align:right;color:#fff;font-size:12px;}
</style>

JS

//触发事件
 $(‘#ver‘).change(function() {
      //if 也可以使用try
        if(typeof this.files == ‘undefined‘) {
            alert(‘建议您使用ie9以上非兼容模式或者火狐，谷歌浏览器进行上传可以实时查看上传进度！‘);
        }
        var ver     = this.files[0];
       //获取文件后缀名
        var fixed   = /\.[^\.]+$/.exec(ver.name);
        if(fixed != ‘.apk‘ && fixed != ‘.ipa‘) {
            alert(‘请上传正确类型的文件！‘);
            return false;
        }
//将进度条显示出来
        $(‘div.progress‘).show();
        try {
            var fd      = new FormData();
        }catch(error) {
            alert(‘建议您使用ie9以上非兼容模式或者火狐，谷歌浏览器进行上传可以实时查看上传进度！‘);
        }
        fd.append(‘ver‘,ver);
        try{
//获取xml对象
            var xhr     = new XMLHttpRequest();
        }catch(error) {
            alert(‘建议您使用ie9以上非兼容模式或者火狐，谷歌浏览器进行上传可以实时查看上传进度！‘);
        }
//发送ajax
        xhr.open(‘post‘,"__URL__/uploadFile",true);
        xhr.upload.onprogress = function(ev) {
//进行进度条展示
            var percent = 0;
            if(ev.lengthComputable) {
                percent = 100 * ev.loaded / ev.total;
                percent = parseFloat(percent).toFixed(2);
                $(‘span.bgpro‘).css(‘width‘,percent + ‘%‘).html(percent + ‘%‘);
            }
        };
        xhr.send(fd);
    });

PHP 
使用tp框架的文件上传
        /*
            版本文件上传
        */
        public function uploadFile() {
            //版本上传
            if($_FILES[‘ver‘][‘name‘] == ‘‘)
                $this->error(‘请上传版本文件！‘);
            //上传
            import("ORG.Net.UploadFile");
            $upload             = new UploadFile();// 实例化上传类
            $upload->maxSize      = -1 ;// 设置附件上传大小
            $upload->allowExts  = array(‘apk‘,‘ipa‘);// 设置附件上传类型
            $upload->savePath     =  C(‘_UPLOAD_URL‘) . ‘Version/‘;// 设置附件上传目录
            $upload->saveRule     = ‘uniqid‘;
            $upload->autoSub     = true;
            if(!$upload->upload()) {// 上传错误提示错误信息
                $this->error($upload->getErrorMsg());
            }else{// 上传成功 获取上传文件信息
                $info =  $upload->getUploadFileInfo();
            }
            return $info[‘ver‘][‘savename‘];
        }