大文件分片上传之前端部分

<!DOCTYPE html>
<HTML lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
      大文件的分片上传
    </title>
  </head>
  
  <body>
    <input type="file" class="file">
    <button type="button" class="btn">
      分片上传
    </button>
    <script type="text/javascript">
      var tag = document.querySelector('button[type="button"]');
      if (tag) tag.onclick = function() {
        var tag = document.querySelector('input[type="file"]');
        var file = tag.files[0];
        var upload = function(file, skip) {
          var blockSize = 1024 * 1024; // 每块的大小
          var nextSize = Math.min((skip + 1) * blockSize, file.size); // 读取到结束位置
          if (skip * blockSize > nextSize) {
            console.log('完');
            return true;
          }
          var fileData = file.slice(skip * blockSize, nextSize); // 截取 部分文件 块
          var formData = new FormData(); // 初始化一个 FormData 对象
          formData.append('file', fileData); // 将 部分文件 塞入 FormData
          formData.append('fileName', file.name); // 保存文件名字
          formData.append('blockSize', blockSize); // 每块的大小
          var xmlHttp = new XMLHttpRequest();
          xmlHttp.open('POST', 'file.php', true);
          // 回调函数
          xmlHttp.onreadystatechange = function(a) {
            var xmlHttp = a.currentTarget;
            // 请求不成功 或 超时
            if (xmlHttp.readyState !== 4) return false;
            // 错误处理
            if (xmlHttp.status !== 200) return false;
            console.log(xmlHttp);
            upload(file, skip + 1); // 递归调用
            return true;
          };
          xmlHttp.send(formData);
          return true;
        };
        upload(file, 0);
      };
    </script>
  </body>
 
</HTML>

<?PHP
// 大文件的分片上传
$file = isset($_FILES['file']) ? $_FILES['file']:null; // 分段的文件
if (!isset($_POST['fileName'])) {
    echo 'failed1';exit;
}
$filename = str_replace(["..","/"."\\"],"",$_POST['fileName']);
$content = file_get_contents($file['tmp_name']);
if (!file_put_contents($filename, $content, FILE_APPEND)) {
    echo 'failed2';
}
exit;

下载

来源:

与本文相关文章

很好!!!!

2020-12-03