本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(Plupload)的解决方案 最近在学习百度的开源上传组件WebUploader,写了一些示例以记录.WebUploader的缺点是没有一个比较好的现成的界面,这个界面需要自己去实现.自由度高了一些. WebUploader

FormData是HTML5新增的一个对象,通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同.具体用法参考 FormData对象的使用. 实现逻辑:客户端首先请求接口,获取一个唯一的UploadID,然后每次按照固定大小读取文件块,同时计算需要上传

写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本上后台处理数据都是用的Servlet,或者是SpringMVC,由于最近的项目一直都是Struts2,所以这里就用Struts2中的action来对数据进行处理,达到分片上传文件的效果. 1.什么是分片上传? 顾名思义,就是把文件分成一片片,即让一个文件,分割成好几个小文件,然后再上传.这样做的好处

断点上传能够防止意外情况导致上传一半的文件下次上传时还要从头下载,网上有很多关于断点的实现,这篇文章只是从前到后完整的记录下一个可用的实例,由于生产环境要求不高,而且就是提供给一两个人用,所以我简化了诸多过程,不用flash,也不用applet,只是通过html5的新特性进行浏览器端的处理. 简单说下关键点 如果上次传到n字节,那么浏览器下次续传直接就是从文件的n字节开始向服务器传送数据,而不是都传过去,服务器从n字节开始接收. html5能给文件分片,所以每次上传完一块文件后,应该返回当前已经

终端实现大文件上传一直都是比较难的技术,其中涉及到后端与前端的交互,稳定性和流量大小,而且实现原理每个人都有自己的想法,后端主流用的比较多的是Http来实现,因为大多实现过断点下载.但稳定性不能保证,一旦断开,无法续传.所以得采用另一种流行的做法,TCP上传大文件. 网上查找了一些资料,大多数是断点下载,然后就是单独的C#端的上传接收,或是HTTP的,或是只有android端的,由于任务紧所以之前找的首选方案当然是Http先来实现文件上传,终端采用Post方法,将文件直接传至后端,后端通过Fil

实现TCP断点上传,后台C#服务实现接收 终端实现大文件上传一直都是比较难的技术,其中涉及到后端与前端的交互,稳定性和流量大小,而且实现原理每个人都有自己的想法,后端主流用的比较多的是Http来实现,因为大多实现过断点下载.但稳定性不能保证,一旦断开,无法续传.所以得采用另一种流行的做法,TCP上传大文件. 网上查找了一些资料,大多数是断点下载,然后就是单独的C#端的上传接收,或是HTTP的,或是只有android端的,由于任务紧所以之前找的首选方案当然是Http先来实现文件上传,终端采用Pos

项目开发中,有时候我们需要将本地的文件上传到服务器,简单的几张图片还好,但是针对iPhone里面的视频文件进行上传,为了用户体验,我们有必要实现断点上传.其实也不是真的断点,这里我们只是模仿断点机制. 需求 既然需要上传文件,那最好要有一个上传列表界面,方面用户对上传中的文件进行实时管理.这里我简单搭建了一个上传列表界面,如下图: 该界面实现的功能:左滑删除,单击暂停.取消,清空列表.退出该界面可后台上传,暂停再次开始或则app被kill掉依旧支持续传.上传完成.删除正在上传文件.清空上传列表都

现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过长,请求超时: 传输中断,必须重新上传导致前功尽弃: 设置了webconfig和iis后还是不能上传成功: 不想使用FTP,只想用http. 我们这里只讲分片上传,至于断网续传和秒传已经写好demo,下载路径放在文末,有兴趣的可以下载下来自己玩玩. 分片上传demo下载地址:https://pan.

目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验:checkChunkUploadedByResponse 8. 源码及后记 1. 前言 之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而

//上传单个/多个文件 <input title="点击选择文件" id="h5Input1" multiple="" accept="*/*" type="file" name="html5uploader" style="position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:poi

/* * js */ function PostFile(file, i, t) {    console.log(1);  var name = file.name, //文件名 size = file.size, type = file.type, //总大小shardSize = 2 * 1024 * 1024, shardSize = 2 * 1024 * 1024, //以2MB为一个分片,每个分片的大小 shardCount = Math.ceil(size / shardSize)

首先,vue和阿里云oss上传图片结合参考了 这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神文章里有写github地址,里面的2.0分支采用vue2.0实现,只不过这个上传图片用的是分片上传,即断点续传,分片上传由于一片是以100kb为起始的,所以当图片大小小于100kb的时候不分片,可以正常上传,当大于100k的时候,会报错如下: One or more of the specified

前言 最近项目中有使用到文件断点上传,得空便总结总结,顺便记录一下,毕竟“好记性不如烂笔头”. 后端代码: package com.test.controller; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import java.util.UUID; import org.apache.commons.io.FileUtils; import org.ap

前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长,请求超时:3,传输中断,必须重新上传导致前功尽弃: 解决方案: 1,修改服务端上传的限制配置:Nginx 以及 PHP 的上传文件限制 不宜过大,一般5M 左右为好: 2,大文件分片,一片一片的传到服务端,再由服务端合并.这么做的好处在于一旦上传失败只是损失一个分片而已,不用整个文件重传,而且每个分

一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content-Range实体头.HTTP协议本身不支持断点上传,需要自己实现. 二.Range 用于请求头中,指定第一个字节的位置和最后一个字节的位置,一般格式: Range:用于客户端到服务端的请求,可以通过改字段指定下载文件的某一段大小及其单位,字节偏移从0开始.典型格式: Ranges:    (unit=

之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需求,都能得到满足.小小开心了一把. 但无论插件再怎么灵活,也难以应付所有的需求,比如,你要上传一个2G的文件.以现在我们的网速,恐怕再快也得传半小时.要命的是,如果你在上传到90%的时候不小心关掉了浏览器,或者是手一抖摁了F5,完了,一切还得从头再来.这种用户体验简直太糟糕了.所以,断点续传就十分有

之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需求,都能得到满足.小小开心了一把. 但无论插件再怎么灵活,也难以应付所有的需求,比如,你要上传一个2G的文件.以现在我们的网速,恐怕再快也得传半小时.要命的是,如果你在上传到90%的时候不小心关掉了浏览器,或者是手一抖摁了F5,完了,一切还得从头再来.这种用户体验简直太糟糕了.所以,断点续传就十分有

一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content-Range实体头.HTTP协议本身不支持断点上传,需要自己实现. 二.Range 用于请求头中,指定第一个字节的位置和最后一个字节的位置,一般格式: Range:用于客户端到服务端的请求,可以通过改字段指定下载文件的某一段大小及其单位,字节偏移从0开始.典型格式: Ranges:    (unit=

1,项目调研 因为需要研究下断点上传的问题.找了很久终于找到一个比较好的项目. 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面. https://github.com/1269085759/up6-jsp-mysql 效果: 上传中,显示进度,时间,百分比. 点击[Pause]暂停,点击[Resume]继续. 2,代码分析 原始项目: 项目进行了封装使用最简单的方法实现了http的断点上传. 因为html5 里面有读取文件分割文件的类

之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需求,都能得到满足.小小开心了一把. 但无论插件再怎么灵活,也难以应付所有的需求,比如,你要上传一个2G的文件.以现在我们的网速,恐怕再快也得传半小时.要命的是,如果你在上传到90%的时候不小心关掉了浏览器,或者是手一抖摁了F5,完了,一切还得从头再来.这种用户体验简直太糟糕了.所以,断点续传就十分有

我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,ie8,ie9,Chrome,Firefox,360安全浏览器,并且刷新浏览器后仍然能够续传,重启浏览器(关闭浏览器后再打开)仍然能够继续上传,重启电脑后仍然能够上传 支持文件夹的上传,要求服务端能够保留层级结构,并且能够续传.需要支持10万个以上的文件夹上传. 支持低版本的系统和浏览器,因为这个项目