代码镇顶: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. Selenium 中 高亮元素

    //高亮元素 WebElement  element = driver.findElement(By.cssSelector(".table1 .btn-public label" ...

  2. CSU-2172 买一送一

    CSU-2172 买一送一 Description ICPCCamp 有 n 个商店,用 1, 2, -, n 编号.对于任意 i > 1,有从商店 \(p_i\) 到 i 的单向道路. 同时, ...

  3. 贪吃蛇—C—基于easyx图形库(上):基本控制函数实现 画图程序

    自从学了c语言,就一直想做个游戏,今天将之付之行动,第一次写的特别烂,各种bug:就不贴了.今天网上看了好几个贪吃蛇,重新写了一次,做出来的效果还可以. p.s.  easyx图形库是为了方便图形学教 ...

  4. POJ 3686 The Windy's(思维+费用流好题)

    The Windy's Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 5362   Accepted: 2249 Descr ...

  5. AssetDatabase.RenameAsset 重命名文件失败

    今天想写一段Unity Editor 的代码将在 Project Panel 中选中的所有 Texture 改变 Format,然后重命名 成 xxx.Dither.png 然后自动进行上一篇文章提到 ...

  6. python之装饰器【转】

    装饰器 先来看一个例子,一个函数f1接收另一个函数f2作为参数,并将该参数f2返回给f2: def deco(func): print("before myfunc() called.&qu ...

  7. BZOJ 3940: [Usaco2015 Feb]Censoring

    3940: [Usaco2015 Feb]Censoring Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 367  Solved: 173[Subm ...

  8. 显示3行,还要省略号(这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器)

    div{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:; -webkit- ...

  9. 当文字过长时裁剪(显示省略号或只裁剪 用CSS方法,不用程序)

    原文发布时间为:2009-09-16 -- 来源于本人的百度文章 [由搬家工具导入] CSS中ellipsis()应用【转】 CSS手册中text-overflow属性的定义:   语法: text- ...

  10. The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing an assembly reference?)

    The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing ...