前端JS之HTML利用XMLHttpRequest()和FormData()进行大文件分段上传

最新推荐文章于 2023-08-25 09:23:56 发布

gukie

最新推荐文章于 2023-08-25 09:23:56 发布

阅读量378

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/gukie/article/details/128016759

版权

### 前端代码
<body>
<input type="file" name="video" id="file"  />
<input type="button" class="btn btn-info" id="sub" value="提交">

  <script>
    $("#sub").on("click",selfile())    #当提交按钮被点击时触发上传

    function selfile(){
      const LENGTH = 1024 * 1024 * 10;//每次上传的大小
      var file = document.getElementsByName('video')[0].files[0];//文件对象
      var filename=document.getElementsByName('video')[0].files[0].name;
      var totalSize = file.size;//文件总大小
      var start = 0;//每次上传的开始字节
      var end = start + LENGTH;//每次上传的结尾字节
      var fd = null;//创建表单数据对象
      var blob = null;//二进制对象
      var xhr = null;//xhr对象
      while(start < totalSize){
        fd = new FormData();//每一次需要重新创建
        xhr = new XMLHttpRequest();//需要每次创建并设置参数
        xhr.open('POST','/qqq/',false);
        blob = file.slice(start,end);//根据长度截取每次需要上传的数据
        fd.append('file_data',blob);//添加数据到fd对象中
        fd.append('filename',filename); //获取文件的名称
          fd.append("file_size",totalSize);
        xhr.send(fd);//将fd数据上传

        //重新设置开始和结尾
        start = end;
        end = start + LENGTH;

      }

     }

  </script>

</body>

##python后端路由视图函数代码：

def qqq(request):
        file_path = "c:aa.txt"
        with open(file_path,"ab") as f:
            for line in request.FILES.get("file_data"):
                f.write(line)