首页 > 代码库 > 使用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实现文件上传进度条
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。