基于JS实现视频上传显示进度条


Posted in Javascript onMay 12, 2020

示例代码:

css部分:

#content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px}
  .list {top: 15px;width: 140px;height: 40px; border:1px solid #0082E6; display:inline-block;border-radius: 2px;position: relative; line-height: 40px;}  
  #file{position: absolute;opacity: 0;color:white;width: 100%;height: 100%;z-index: 100;}
  .list span{
    display: inline-block;
    text-align: center;
    width: 100%;
    line-height: 40px;
    position: absolute;
    color: #0082E6;
  }
  video{
    margin-top: 8px;
    border-radius: 4px;
  }
  ._p{
    margin: 14px;
  }
  ._p input{
    display: inline-block;
    width: 70%;
    margin-left: 6px;
  }
  ._p span{
    font-size: 15px;
  }

html部分

<div id="content" >
   <p class="_p"><span>视频标题</span>:<input id="title" type="text" class="form-control" placeholder="请输入视频名称"></p>
   <p class="_p">
     <span>选择视频: </span>
     <!--文件选择按钮-->
    <a class="list" href="javascript:;" rel="external nofollow" > 
      <input id="file" type="file" name="myfile" onchange="UpladFile();" /><span>选择视频</span>
    </a> 
    <!--上传速度显示-->
    <span id="time"></span> 
   </p>
   <!--显示消失-->
   <ul class="el-upload-list el-upload-list--text" style="display: none;">
     <li tabindex="0" class="el-upload-list__item is-success" >
       <a class="el-upload-list__item-name">
         <i class="el-icon-document"></i><span id="videoName">food.jpeg</span>
    </a> 
    <label class="el-upload-list__item-status-label" >
      <i class="el-icon-upload-success el-icon-circle-check" ></i>
    </label>
    <i class="el-icon-close" onclick="del();"></i>
    <i class="el-icon-close-tip"></i>
     </li>
   </ul>
  
  <!--进度条-->
  <div class="el-progress el-progress--line" style="display: none;">
    <div class="el-progress-bar">
      <div class="el-progress-bar__outer" style="height: 6px;">
        <div class="el-progress-bar__inner" style="width: 0%;">
        </div>
      </div>
    </div>
    <div class="el-progress__text" style="font-size: 14.4px;">0%</div>
  </div>
  <p class="_p"><span>上传视频</span>:<button class="btn btn-primary" type="button" onclick="sub();">上传</button></p>
  
  <!--预览框-->
  <div class="preview">
    
  </div>
  </div>

js部分:

<script type="text/javascript"> 
  var xhr;//异步请求对象
  var ot; //时间
  var oloaded;//大小
  //上传文件方法
  function UpladFile() {
    var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
    if(fileObj.name){
      $(".el-upload-list").css("display","block");
      $(".el-upload-list li").css("border","1px solid #20a0ff");
      $("#videoName").text(fileObj.name);
    }else{
      alert("请选择文件");
    }
  }
  /*点击取消*/
  function del(){
    $("#file").val('');
    $(".el-upload-list").css("display","none");
  }
  /*点击提交*/
  function sub(){
    var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
    if(fileObj==undefined||fileObj==""){
      alert("请选择文件");
      return false;
    };
    var title = $.trim($("#title").val());
    if(title==''){
      alert("请填写视频标题");
      return false;
    }
    var url = "{php echo webUrl('goods/iframe.upload')}"; // 接收上传文件的后台地址 
    var form = new FormData(); // FormData 对象
    form.append("mf", fileObj); // 文件对象 
    form.append("title", title); // 标题
    xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
    xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
    xhr.onload = uploadComplete; //请求完成
    xhr.onerror = uploadFailed; //请求失败
    xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】
    xhr.upload.onloadstart = function() { //上传开始执行方法
      ot = new Date().getTime(); //设置上传开始时间
      oloaded = 0; //设置上传开始时,以上传的文件大小为0
    };
    xhr.send(form); //开始上传,发送form数据
  }
  
  //上传进度实现方法,上传过程中会频繁调用该方法
  function progressFunction(evt) { 
    // event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
    if(evt.lengthComputable) {
      $(".el-progress--line").css("display","block");
      /*进度条显示进度*/
      $(".el-progress-bar__inner").css("width", Math.round(evt.loaded / evt.total * 100) + "%");
      $(".el-progress__text").html(Math.round(evt.loaded / evt.total * 100)+"%");  
    }

    var time = document.getElementById("time");
    var nt = new Date().getTime(); //获取当前时间
    var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差,单位为s
    ot = new Date().getTime(); //重新赋值时间,用于下次计算

    var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b 
    oloaded = evt.loaded; //重新赋值已上传文件大小,用以下次计算

    //上传速度计算
    var speed = perload / pertime; //单位b/s
    var bspeed = speed;
    var units = 'b/s'; //单位名称
    if(speed / 1024 > 1) {
      speed = speed / 1024;
      units = 'k/s';
    }
    if(speed / 1024 > 1) {
      speed = speed / 1024;
      units = 'M/s';
    }
    speed = speed.toFixed(1);
    //剩余时间
    var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
    time.innerHTML = '上传速度:' + speed + units + ',剩余时间:' + resttime + 's';
    if(bspeed == 0)
      time.innerHTML = '上传已取消';
  }
  //上传成功响应
  function uploadComplete(evt) {
    //服务断接收完文件返回的结果 注意返回的字符串要去掉双引号
    if(evt.target.responseText){
      var str = "../shiping/"+evt.target.responseText;
      alert("上传成功!");
      $(".preview").append("<video controls='' autoplay='' name='media'><source src="+str+" type='video/mp4'></video>");
    }else{
      alert("上传失败");
    }
  }
  //上传失败
  function uploadFailed(evt) {
    alert("上传失败!");
  }
</script>

后台用PHP实现

//视频上传
  public function upload(){
    global $_W;
    global $_GPC;
    $fileArr = $_FILES['mf'];
    $title = $_GPC['title'];
    /*var_dump($title);
    exit;*/
    //设置预览目录,上传成功的路径 
    $previewPath = "../shiping/";
    $ext = pathinfo($fileArr['name'], PATHINFO_EXTENSION);//获取当前上传文件扩展名 
    $arrExt = array('3gp','rmvb','flv','wmv','avi','mkv','mp4','mp3','wav',);
    
    if(!in_array($ext,$arrExt)) {
       exit(json_encode(-1,JSON_UNESCAPED_UNICODE));//视/音频或采用了不合适的扩展名!  
    } else {       
        //文件上传到预览目录   
        $previewName = 'pre_'.md5(mt_rand(1000,9999)).time().'.'.$ext; //文件重命名 
        $previewSrc = $previewPath.$previewName;
        
        if(move_uploaded_file($fileArr['tmp_name'],$previewSrc)){//上传文件操作,上传失败的操作
           exit($previewName);
        } else {
          //上传成功的失败的操作
          exit(json_encode(0,JSON_UNESCAPED_UNICODE));
        }    
    } 
  }

实现效果:

选择视频

基于JS实现视频上传显示进度条

上传中........

基于JS实现视频上传显示进度条

上传完成

基于JS实现视频上传显示进度条

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 #Javascript
Vue实现图片轮播组件思路及实例解析
May 11 #Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 #Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 #Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 #Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 #Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 #Javascript
You might like
PHP编写RESTful接口
2016/02/23 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
js中apply方法的使用详细解析
2013/11/04 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
EsLint入门学习教程
2017/02/17 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
应届生求职推荐信
2013/10/28 职场文书
就业自我评价
2014/02/04 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
python神经网络Xception模型
2022/05/06 Python