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

### 前端代码
<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. 2019ICPC区域赛（银川）总结

    2019ICPC银川 作为第一次打区域赛的我,心情异常激动,加上学校给坐飞机(事实上赶飞机很痛苦). 热身赛很难受,oj上不去,写AC自动机输入没写好.. 现场赛,开场直觉倒着看,发现签到.然后看B, ...

  2. 不一样的 Null

    前不久处理一个异常的时候发现了一段有趣的代码,一同事在往表里(Sql Server 数据库)添加数据的时候给可以为 null 的字段赋了如下的值: Student stu = new Student( ...

  3. HR# 5题解

    T1 我傻了 前20个数暴力开桶记录,后面的每次暴力统计. #include<bits/stdc++.h> #define R register int using namespace s ...

  4. synchronized和AtomicXXX效率比较

    在Java中,i++和++i都是xian线程不安全的,如果要用十个线程累加一个资源,就会出现错误.synchronized和Atomic是实现线程安全常用方法.而二者效率问题孰优孰劣?本着规律符合任意 ...

  5. 030_根据 md5 校验码,检测文件是否被修改

    #!/bin/bash#本示例脚本检测的是/etc 目录下所有的 conf 结尾的文件,根据实际情况,可以修改为其他目录或文件#本脚本在目标数据没有被修改时执行一次,当怀疑数据被人篡改,再执行一次#将 ...

  6. PHP基础--traits的应用

    Traits 在PHP中实现在方法的重复使用:Traits与Class相似,但是它能够在Class中使用自己的方法而不用继承: Traits在Class中优先于原Class中的方法,引用PHP Doc ...

  7. 【説明する】KMP

    KMP是一个困扰我很久的算法,听老师或者是学姐讲了差不多有4次了,但是还是搞不太懂,今天终于,终于,终于搞懂了! ——2017-10-29 Vanora 首先推荐一下KMP详解——July 读罢之后内 ...

  8. GAN生成式对抗网络（一）——原理

    生成式对抗网络(GAN, Generative Adversarial Networks )是一种深度学习模型 GAN包括两个核心模块. 1.生成器模块 --generator 2.判别器模块--de ...

  9. C到汇编[1]

    这篇文字解释这个问题:C语言函数调用在汇编语言是怎么实现的?栈模型很好的满足了函数调用的需求,以最简单的函数调用说明. : int add2(int a, int b){return a+b;} 00 ...

  10. pwn学习日记Day18 《程序员的自我修养》读书笔记

    知识杂项 obj文件:当前源代码编译成二进制目标文件 exe文件:将.obj文件与库文件.lib等文件链接生成的可执行文件 一个现代编译器的主要工作流程如下: 源程序(source code)→ 预处 ...