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

示例代码：

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部分

   
视频标题：
   

     选择视频： 
     
     
      选择视频
     
    
     
   
   
   

     

       
         food.jpeg
     
    
      
    
    
    
     
   
  
  
  

    

      

        

        
      
    
    
0%
  
  
上传视频：上传
  
  
  

    
  
  

js部分：

后台用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));
        }    
    } 
  }

实现效果：

选择视频

上传中........

上传完成

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。