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

### 前端代码
<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 3052/Luogu P4074 [wc2013]糖果公园 （树上带修莫队）

    题面 中文题面,难得解释了 BZOJ传送门 Luogu传送门 分析 树上带修莫队板子题... 开始没给分块大小赋初值T了好一会... CODE #include <bits/stdc++.h&g ...

  2. Turbo编码

    在做项目时,观察到师兄代码中的Turbo编码过程,不是很理解,把实现过程分享出来,原理则参考引用链接: 以512长原始数据为例,按照LTE标准的1/3码率对其编码,编码后的数据为(1548,512), ...

  3. focusout([data],fn) 当元素失去焦点时触发 focusout 事件。

    focusout([data],fn) 概述 当元素失去焦点时触发 focusout 事件. focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况.大理石平台怎么样 参 ...

  4. word黏贴图片显示不出来

    word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法提交到服务器上的问题而开发的一个操作简便的图片转 ...

  5. luogu 1903 [国家集训队]数颜色 / 维护队列 带修改莫队

    十分玄学的数据结构~ code: #include <bits/stdc++.h> #define N 1000006 #define setIO(s) freopen(s".i ...

  6. 「NOI 2018」归程「Kruskal 重构树」

    题解 Kruskal重构树:每次一条边连接两个集合,建一个新点,点权为该边边权:把这两个集合的根连向新点. 性质:(如果求的是最大生成树)叶子结点是图中实际结点:叶子到根路径上点权递减:两点间lca的 ...

  7. linux crontab 防止周期内为执行完成重复执行

    问题的背景: 我们常常需要通过crontab部署某个脚本运行某些定时任务,但在实际的过程中,一旦处理不好可能导致在同一时刻出现脚本的多个运行副本,比如crontab的调度是每5 分钟运行一次脚本,如果 ...

  8. php安装扩展的地址

    1 查看扩展 phpinfo  or extention_loads  or php -m 下载扩展地址 http://pecl.php.net     or http://windows.php.n ...

  9. Linux之信号

    产生信号五种方法: 按键产生:ctrl+c.ctrl+z.ctrl+\ 系统调用产生:如kill.raise.baort 软件条件产生:如定时器alarm 硬件异常产生:非法访问内存(段错误).除0( ...

  10. centos7安装gitlab 支持带认证https,开启邮件功能 超级简单.

    官方安装说明:https://about.gitlab.com/install/#centos-7 自定义yum源 自行搞定 下载gitlab 官方安装: curl -s https://packag ...