前端JS之HTML利用XMLHttpRequest()和FormData()进行大文件分段上传
用于网页向后端上传大文件
### 前端代码
<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()进行大文件分段上传的更多相关文章
- js之大文件分段上传、断点续传
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- 利用JavaScript 的formdata 进行无刷新上传文件
<html> <head> <title></title> <script type=&quo ...
- 前端使用 js 如何实现大文件上传
前端使用 js 如何实现大文件上传 大文件上传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- js文件分段上传
前端代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10
/* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...
- js实现大文件上传分片上传断点续传
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- JS大文件上传断点续传解决方案
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- JS大文件上传解决方案
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- Java Web使用Html5 FormData实现多文件上传
前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...
随机推荐
- C#常规开发Windows服务
.Net平台下开发Windows服务的支持库很多,除了通过标准的Windows服务项目,还有一些优秀的开源架构比如:TopSelf:本文以常规项目为例 一.开发 1.新建[Windows服务] 项目: ...
- HDU 6141 - I am your Father! | 2017 Multi-University Training Contest 8
思路来自 FXXL 最小树形图模板用kuangbin的 /* HDU 6141 - I am your Father! [ 最小树形图 ] | 2017 Multi-University Traini ...
- 参数类型 (Mapper.java)常用
UserBaseInfo selectByMobile(@Param("mobile")String mobile,@Param("isDeleted")Int ...
- bzoj4400
/* * 此题同bzoj2725 * 增加了枚举边的操作 */ #include <bits/stdc++.h> ;// oo = 999999999; #define LL long l ...
- [Luogu] 矩阵加速(数列)
题面:https://www.luogu.org/problemnew/show/P1939 题解:https://www.zybuluo.com/wsndy-xx/note/1153810
- 最小生成树&&次小生成树
对于一个边上具有权值的图来说,其边权值和最小的生成树叫做图G的最小生成树 求无向图最小生成树主要有prim和kruskal两种算法 1.prim 将点集V分成Va和Vb两部分,Va为已经连入生成树的点 ...
- (转)初试 Netflix 开源持续云交付平台 Spinnaker
目录 Spinnaker 介绍 环境.软件准备 安装 Development Spinnaker 配置依赖环境 配置并安装 Spinnaker 演示 Spinnaker Pipeline 演示 Spi ...
- java集合类-集合框架体系
集合框架体系 集合框架体系是由Collection.Map和 Iterator(迭代器) 实线边框的是实现类,折线边框的是抽象类,而点线边框的是接口 Collection体系 Set接口:元素无序且不 ...
- Codeforces 1239D. Catowice City
传送门 如果选择 $i$ 当陪审团成员,那么 $i$ 认识的猫一定不能参加 又因为总人数和猫数要为 $n$ ,那么 $i$ 认识的猫 的主人也一定要当陪审团成员(不然总数不够) 所以可以考虑这样构图, ...
- Atcoder ABC 139B
Atcoder ABC 139B 题意: 一开始有1个插口,你的插排有 $ a $ 个插口,你需要 $ b $ 个插口,问你最少需要多少个插排. 解法: 暴力模拟. CODE: #include< ...