<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>上传视频</title>  <style>    #bar-warp {      width: 500px;      height: 30px;      border: 1px solid green;    }    #bar {      width: 0px;      height: 30px;      background: green;    }  </style></head><body>  <div id="bar-warp">    <div id="bar"></div>  </div>  <span id="precent"></span>  <br />  <input type="file" onchange="changeFile(event)" />  <script>    async function changeFile(e) {      let files = e.target.files      // await checkSize(files,true--> 为音频是应用 默认为false), '返回值、外面有 （尺寸宽 --- 分辨率） 尺寸高 视频时长 1 示意1秒   尺寸比例 [16,9]';       let checkSizes      if (files[0].type == "audio/mpeg") {        checkSizes = await checkSize(files, true)      } else if (files[0].type == "video/mp4") {        checkSizes = await checkSize(files)      }      if (checkSizes.duration > 300) {        console.log('视频上传工夫不能大于5分钟')        return      }      if (checkSizes.videoWidth != 1280 && checkSizes.videoHeight <= 720) {        console.log('只能视频上分辨率为720')        return      }      if (checkSizes.ccbl.join(':') != '16:9') {        console.log('上传尺寸为16:9的视频')        return      }      var pic = files[0]      var fd = new FormData();      var xhr = new XMLHttpRequest();      // 这里写接口      xhr.open('post', 'aa', true);      xhr.onreadystatechange = function () {        //readystate为4示意申请已实现并就绪        if (this.readyState == 4) {          document.getElementById('precent').innerHTML = this.responseText;          //在进度条下方插入百分比        }      }      xhr.upload.onprogress = function (ev) {        //如果ev.lengthComputable为true就能够开始计算上传进度        //上传进度 = 100* ev.loaded/ev.total        if (ev.lengthComputable) {          var precent = 100 * ev.loaded / ev.total;          console.log(precent);          //更改进度条，及百分比          document.getElementById('bar').style.width = precent + '%';          document.getElementById('precent').innerHTML = Math.floor(precent) + '%';        }      }      fd.append('pic', pic);      xhr.send(fd);    }    // 获取最大公约数    function getGcd(a, b) {      let n1, n2;      if (a > b) {        n1 = a;        n2 = b;      } else {        n1 = b;        n2 = a;      }      let remainder = n1 % n2;      if (remainder === 0) {        return n2;      } else {        return getGcd(n2, remainder)      }    }    // 创立虚构dom 并且放回对应的值    let checkSize = async (files, isVideo) => {      if (!files || !files[0]) return false      const checktimevideo = document.getElementById('checktimevideo')      if (checktimevideo) {        document.body.removeChild(checktimevideo)      }      let doms      if (!isVideo) {        doms = document.createElement('video')      } else {        doms = document.createElement('audio')      }      const url = URL.createObjectURL(files[0])      console.log(url)      doms.src = url      doms.id = 'checktimevideo'      doms.style.display = 'none'      document.body.appendChild(doms)      return await gettime(doms);    }    let gettime = (doms) => {      // 因为loadedmetadata 是异步代码所以须要promise进行封装转换为同步代码执行      const promise = new Promise(resolve => {        doms.addEventListener('loadedmetadata', e => {          const gcd = getGcd(e.target.videoWidth, e.target.videoHeight);          console.log(gcd)          let obj = {            videoWidth: doms.videoWidth, // 尺寸宽 --- 分辨率            videoHeight: doms.videoHeight, // 尺寸高            duration: e.target.duration, // 视频时长 1示意一秒            ccbl: [e.target.videoWidth / gcd, e.target.videoHeight / gcd] // 计算尺寸比例          }          resolve(obj)        })      })      return promise    }  </script></body></html>