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

### 前端代码
<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. 012_Linux驱动之_wait_event_interruptible

    1. 首先这篇博客讲解得挺好的,推荐 wait_event_interruptible 使用方法 2 .函数原型: #define wait_event_interruptible(wq, condi ...

  2. java实现大文件上传和下载

    [文件上传和下载]是很多系统必备功能, 比如PM\OA\ERP等:系统中常见的开发模式有B/S和C/S,而前者主要是通过浏览器来访问web服务器,一般采用七层协议中的[应用层http]进行数据传输,后 ...

  3. bzoj 3545

    bzoj 3555 离线版本 线段树合并 做法是将询问和边权都排序 给每个点建一棵线段树 然后边建mst边回答询问 每次合并两个连通块的时候 要将两个连通块的线段树合并起来 线段树合并部分code i ...

  4. [Luogu] 魔板

    https://www.luogu.org/problemnew/show/P1275 #include <iostream> #include <cstdio> #inclu ...

  5. UVALive 3716 DNA Regions ——（扫描法）

    乍一看这个问题似乎是很复杂,但其实很好解决. 先处理出每个点到原点的距离和到x正半轴的角度(从x正半轴逆时针旋转的角度).然后以后者进行排序. 枚举每一个点到圆心的距离,作为半径,并找出其他到圆心距离 ...

  6. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  7. linux下编辑VI窗口插入与编辑命令

    前言 在嵌入式linux开发中,进行需要修改一下配置文件之类的,必须使用vi,因此,熟悉 vi 的一些基本操作,有助于提高工作效率. 一,模式 vi编辑器有3种模式:命令模式.输入模式.末行模式.掌握 ...

  8. 五一 DAY 4

    DAY 4    2019.5.1 PART 1    进制转化 10 = 23+21= 1010(2)       = 32+30= 101(3) 进制转化常见问题: 1.十进制数 x ----&g ...

  9. 十个Python爬虫武器库示例，十个爬虫框架，十种实现爬虫的方法！

    一般比价小型的爬虫需求,我是直接使用requests库 + bs4就解决了,再麻烦点就使用selenium解决js的异步 加载问题.相对比较大型的需求才使用框架,主要是便于管理以及扩展等. 1.Scr ...

  10. CPU分几核几核的是什么意思？

    CPU的几核分类其实是按照CPU的地址总线数量来分类的 单核心的地址总线数量是8条 双核心就是16条 三核心就是24 依次类推,核心的多少,只需要知道地址总线的多少,然后除以8就得出来了 地址总线:地 ...