首页 > 代码库 > 使用html5实现文件上传进度条

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

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‘];        }

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