基于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'];
    
    //设置预览目录,上传成功的路径 
    $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));
 }    
    } 
  }

实现效果：

选择视频

上传中........

上传完成

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