console 命令行工具 X clear

console

document.getElementById('videoFile').addEventListener('change', function() {  
    
  var file = this.files[0];  
  const videoURL = URL.createObjectURL(file);
  const videoElement = document.createElement('video');
    videoElement.src = videoURL;
    videoElement.controls = true; // 显示播放控件
    videoElement.autoplay = true
    videoElement.style.width = '200px'

    // 将视频元素添加到页面中的某个容器中
    document.getElementById('video-box').appendChild(videoElement);
//   console.log(videoURL)

  var formData = new FormData();  
  formData.append('file', file);  
    
  var xhr = new XMLHttpRequest();  
  xhr.open('POST', '/upload', true); // 将 '/upload' 替换为实际的上传URL  
  xhr.upload.onprogress = function(e) {  
    if (e.lengthComputable) {  
      var percentComplete = (e.loaded / e.total) * 100;  
      var progressBar = document.querySelector('.progress');  
      progressBar.style.width = percentComplete + '%';  
      document.getElementById('uploadStatus').textContent = '上传进度：' + percentComplete.toFixed(2) + '%';  

        if(percentComplete == '100'){
            document.getElementById('uploadStatus').textContent = '视频上传完成'; 
        }
    }  
  };  
  xhr.onload = function() {  
    if (this.status === 200) {  
      document.querySelector('.progress').style.width = '100%';  
      document.getElementById('uploadStatus').textContent = '视频上传完成！';  
    } else {  
      // 处理上传失败的情况  
    }  
  };  
  xhr.send(formData);  
});

<!DOCTYPE html>  
<html>  
<head>  
  <title>视频上传</title>  
  <style>  
    .progress-bar { 
      position:relative;
      margin-top:20px;
      width: 300px;  
      height: 40px;  
      background-color: #ddd;  
      border-radius: 5px;  
    }  
      
    .progress {  
      width: 0%;  
      height: 100%;  
      background-color: skyblue;  
      border-radius: 5px;  
    }  
      
    #uploadStatus { 
        font-size:14px;
        color:#fff;
        font-weight: 700;
        position:absolute;
        top:30%;
        left:50%;
        height:13px;
        
        text-align:center;
        transform: translate(-50%,-90%); 
      margin-top: 10px;  
    }  
    .video-box {
        width:200px;
        height:400px;
    }
    .videoFile {
        margin-bottom:10px;
    }
  </style>  
</head>  
<body>  
    <input type="file" id="videoFile" accept="video/*">  
    <br>  
    <div id="video-box"></div>
    <div class="progress-bar">  
        <div class="progress"></div>  
        <div id="uploadStatus"></div>
    </div>  
    
</body>  
</html>