zoukankan      html  css  js  c++  java
  • Web支持可暂停的超大文件上传

    代码镇顶: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

  • 相关阅读:
    centos 挂载u盘
    如何将网站部署到tomcat根目录下
    seo工具
    mysql 1045 access denied for user********
    div 自适应宽度
    mysql 日志提示 is marked as crashed and should be repaired
    css overflow:hidden无效解决办法
    java 调用 .net webservice
    Java开发笔记(十五)短路逻辑运算的优势
    Java开发笔记(十四)几种运算符的优先级顺序
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/8674902.html
Copyright © 2011-2022 走看看