基于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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python中的filter()函数的用法
2015/04/27 Python
在Django中创建动态视图的教程
2015/07/15 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
python 基于wx实现音乐播放
2020/11/24 Python
python实现xml转json文件的示例代码
2020/12/30 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
学年末自我鉴定
2014/01/21 职场文书
优秀护士演讲稿
2014/04/30 职场文书
城管综合整治方案
2014/05/01 职场文书
2014年班务工作总结
2014/12/02 职场文书
班委竞选稿范文
2015/11/21 职场文书