HTML+JS实现视频上传显示进度条

#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;
    }

<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:;"> 
            <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.jpegspan>
        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>

//视频上传
    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));
                }        
        }  
    }