代码镇顶:https://github.com/dna2github/petalJS/blob/master/upload

前些天遇到用户须要上传10GB大小以上的文件的需求,查查网上的库。都不好用。都没有一个完整的前后端的样例,要么像resumable.js仅仅有前端,后端写得无比麻烦。要么是jquery file uploader封装得太完整。想改就非常麻烦。

懒人就自己写个小而易懂大家都能够用的东西吧。

代码支持IE 10+, Opera, Chrome, Firefox, Safari, 在Android 4.2以上的默认浏览器貌似都能顺利执行。

js代码也就80行左右。错误处理留空。

代码下载后, python manage.py runserver,然后浏览器里输入 http://127.0.0.1:8000/static/index.html就能够使用了。

代码js部分就是使用HTML5的Blob将文件分片,然后逐个POST。

为了保证传输效率,就是让整个POST请求除了HTML的Header外。都用binary形式上传。假设再配合新的API,比方后端写一个open file的API(e.g. /open)。返回一个hash。然后用hash作为URL,上传文件data的时候(e.g. /upload/:hash)就往指定文件中写数据就好了,最后使用完调用close file的API(e.g. /close/:hash)。測试了下,在单机状态下,传了2.6GB的文件用了77秒,大概30MB/s。几乎相同是硬盘的读写速度了吧。

想要实现暂停和恢复,在event_reader_loadend里使用个flag就能够了。暂停的时候设置flag为true,在上传blob成功的时候假设flag为true就跳出停止。当按恢复的时候,继续从暂停的地方按文件偏移读取文件blob。

想要达到更好的传输速度,就在uploadFile里的step上下文章就好了。通过统计没传一个blob所用的时间,动态调整step的大小。就是文件blob的大小。

要是遇到服务器错误或者用户不小心刷新了页面,就是另外的case了,这里就是简单说一下。使用file_name, file_size和file_md5是能够在即使页面刷新的情况下继续上传文件。

支持断点下载也是外话。读下Content-Range实现下206返回就好了。Enjoy :D

Web支持可暂停的超大文件上传的更多相关文章

  1. web超大文件上传

    文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...

  2. 【Java Web开发学习】Spring MVC文件上传

    [Java Web开发学习]Spring MVC文件上传 转载:https://www.cnblogs.com/yangchongxing/p/9290489.html 文件上传有两种实现方式,都比较 ...

  3. 4GB以上超大文件上传和断点续传服务器的实现

    随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求. 但是在很多情况下,平台运营方并没有大文件上传和断点续传的开发经验,往往在网上找一些简单的 ...

  4. Java超大文件上传解决办法

    这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...

  5. Spring 4 官方文档学习(十一)Web MVC 框架之multipart(文件上传)支持

    http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-multipart 1.简 ...

  6. java+web+超大文件上传

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...

  7. php+超大文件上传

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

  8. 怎么实现超大文件上传 2-3GB

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

  9. PHP超大文件上传与下载

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

随机推荐

  1. 重新安装Linux自带的JDK

    1.卸载现有jdk 查看本机已经安装的JDK的版本: [root@mcb ~]# java -version java version "1.6.0" OpenJDK Runtim ...

  2. 最少的硬币数量组合出1到m之间的任意面值(贪心算法)

    题目描述: 你有n种不同面值的硬币,每种面值的硬币都有无限多个,为了方便购物,你希望带尽量少的硬币,并且要能组合出 1 到 m 之间(包含1和m)的所有面值. 输入描述: 第一行包含两个整数:m ,n ...

  3. 【LeetCode】Implement strStr()(实现strStr())

    这道题是LeetCode里的第28道题. 题目描述: 实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle ...

  4. Linux编程之变量

    Bash变量与变量分类 变量命名规则 变量名必须以字母或下划线打头,名字中间只能由字母.数字和下划线组成 变量名的长度不得超过255个字符 变量名在有效的范围内必须是唯一的 在Bash中,变量的默认类 ...

  5. [oldboy-django][2深入django]django模板使用函数

    1 模板引入子html--include 模板引擎 - 母版 - include,导入公共的html a. 用法:{% include "pub.html" %}, pub.htm ...

  6. [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  7. 【转】Unity3d实现物体围绕某一点进行旋转

    1,让一个物体围绕某一点旋转,有几种方法?分别是什么? 答:在这个点处放一个空物体B,则问题变为A绕着B旋转, 方法1:B不动,A挂脚本实现transform的RotateAround(vector3 ...

  8. ruby 规整git commit 信息

    实现过程: 1.使用git log 可以获取到所有git commit.对命令加入参数后,可以获取某段时间的log.和只输出log的某些字段.如: [root@localhost crowd-web- ...

  9. java同步器__学习笔记

    参照:http://ifeve.com/introduce-abstractqueuedsynchronizer/ 前言: 在java.util.concurrent.locks包中有很多Lock的实 ...

  10. CodeForces875C[拓扑排序] Codeforces Round #440 [Div2E/Div1C]

    只要保存每相邻两行字符串 第一个不同位 即可.然后按照 第一个不同位上的字符有: " 来自下一行的 大于 来自上一行的" 构图,跑拓扑排序即可. 当然要判断一下有没有环构成, 有环 ...