zoukankan      html  css  js  c++  java
  • 使用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{400px;height:20px;border:1px solid blue;background:#fff;display:none;}
        span.bgpro{display:block;height:20px;background:blue;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'];
            }
  • 相关阅读:
    利用virtual box安装ubuntu16.4,没有继续(下一步)的解决方案
    最好用的几个谷歌镜像(推荐理由:无广告)
    vs2017和vs2019专业版和企业版
    c# List根据某个属性进行分类,变成以属性名称作为分类的多个List
    vs2015安装编辑神器:resharper10.0
    c# 正则表达式替换字符串中常见的特殊字符
    IL中间语言指令大全
    c#进阶一:使用ILDASM来查看c#中间语言
    SQL server脚本语句积累
    SQLServer事务在C#当中的应用
  • 原文地址:https://www.cnblogs.com/lxdd/p/3949669.html
Copyright © 2011-2022 走看看