用于网页向后端上传大文件

### 前端代码
<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)

欢迎来搂~~~

前端JS之HTML利用XMLHttpRequest()和FormData()进行大文件分段上传的更多相关文章

  1. js之大文件分段上传、断点续传

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  2. 利用JavaScript 的formdata 进行无刷新上传文件

          <html>     <head>         <title></title>         <script type=&quo ...

  3. 前端使用 js 如何实现大文件上传

    前端使用 js 如何实现大文件上传 大文件上传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  4. js文件分段上传

    前端代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...

  5. ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  6. js实现大文件上传分片上传断点续传

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  7. JS大文件上传断点续传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  8. JS大文件上传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  9. Java Web使用Html5 FormData实现多文件上传

    前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...

随机推荐

  1. BZOJ 3925: [Zjoi2015] 地震后的幻想乡(概率DP)

    这里有一篇很好很强的博客%%% YouSiki大佬的博客 多理解一会就行了- 代码 #include <bits/stdc++.h> using namespace std; typede ...

  2. Machine Schedule为什么UVA过了POJ过不了

    UVA1194 POJ1325 POJ要多判一个非零!!! #include<cstdio> #include<vector> #include<cstring> ...

  3. vs2015 调试 无法启动程序

    应用程序输出在这个目录 E:\learn\3dlesson\lesson1_createwindow\build\Debug 项目属性 解决方案: 把项目设为启动项目.

  4. 7月清北学堂培训 Day 4

    今天是丁明朔老师的讲授~ 图论 图是种抽象结构,这种抽象结构可以表示点与点之间的关系. 最短路: Dijkstra(堆优化) SPFA Floyd 最小生成树: Kruscal 连通性: BFS / ...

  5. 十八、centos7网络属性配置

    一.为什么需要这个 服务器通常有多块网卡,有板载集成的,同时也有插在PCIe插槽的.Linux系统的命名原来是eth0,eth1这样的形式,但是这个编号往往不一定准确对应网卡接口的物理顺序.为解决这类 ...

  6. AGC009C Division into Two

    题意 有\(n\)个严格升序的数,请你分成两个集合\(A\)和\(B\),其中一个集合任意两数之差不小于\(x\),另一集合任意两数之差不小于\(y\). 问方案数,集合可以为空. $n \le 10 ...

  7. JAVA基础知识|内部类

    一.什么是内部类? 内部类(inner class)是定义在另一个类中的类 为什么使用内部类? 1)内部类方法可以访问该类定义所在的作用域中的数据,包括私有数据 2)内部类可以对同一个包中的其他类隐藏 ...

  8. 【Robot Framework 项目实战 03】使用脚本自动生成统一格式的RF自动化用例

    背景 虽然大家都已经使用了统一的关键字,但是在检查了一些测试用例之后,还是发现因为大家对RF的熟悉程度不一导致的测试用例颗粒度差异很大的情况:而且在手动方式转化测试用例过程中,有不少工作是完全重复的且 ...

  9. Protocol Buffers学习笔记

    Protocol Buffers学习笔记 1. 简介 Protocol Buffers是google发明的一种数据交换格式,独立于语言,独立于平台.与其他的数据交换格式有所不同,Protocol Bu ...

  10. 图的深度优先遍历(DFS)和广度优先遍历(BFS)算法分析

    1. 深度优先遍历 深度优先遍历(Depth First Search)的主要思想是: 1.首先以一个未被访问过的顶点作为起始顶点,沿当前顶点的边走到未访问过的顶点: 2.当没有未访问过的顶点时,则回 ...