Stream上传插件(HTML5支持拖拽、断点续传)

原创
2013/08/20 15:49
阅读数 7.5K

提示:由于近期咨询问题越来多,感觉力不从心,咨询访问http://www.twinkling.cn查看相关文档常见问题,如果网站已经出现相关问题,不再回复!


1、需要描述:

    Stream的WEB上传插件支持HTML5,Flash两种方式上传,这包括两个重要的需求:①大文件上传②跨域上传。其上传的主要流程是:①获取token(本域)=》②获取文件要上传到的服务器(跨域) =》③上传文件(跨域)。主要流程更改成常规的流程:①获取token(本域,如果需要跨域,则返回跨域的服务器)=》②上传文件

2、主要特征:

  1. 支持HTML5、Flash两种方式(跨域)上传
  2. 支持多文件一起上传
  3. HTML5方式支持断点续传,拖拽等新特性
  4. 兼容性好IE7+, FF3.6+, Chrome*,Safari4+遨游等主流浏览器
  5. 选择文件的按钮完全可以自定义
  6. 进度条、速度、剩余时间等附属信息(网易的UI)
  7. 基本的自定义属性及函数,如文件多选、上传成功的响应函数等
  8. 示例代码java实现(StreamServlet, FormDataServlet{commons-fileupload的stream api}, TokenServlet)
  9. 支持文件夹上传(Chrome21+, Opera15+)
  10. 支持自定义UI(V1.4+)

    注:Chrome没测试最低版本,不想支持IE6

3、不足:

  1. 浏览器兼容性未全部测试(工程太巨大)
  2. windows下的Safari5.1.17多选文件存在问题(初步认定是Safari的bug)
  3. 中文编码问题(tomcat容器下需要设置server.xml中的URIEncoding="UTF-8"属性)

4、快速开始:

    参见: http://git.oschina.net/jiangdx/stream/wikis/quick-start

5、致谢:

     爬取优酷的uploader.min.js和网易的UI,其中JS强大的OOP思想不是一般的JS工程师能够写出来,UI很大程度上解决了兼容性。最后此文仅向奋斗的一线的前端工程师致敬!

项目主页:http://www.twinkling.cn/

断点续传(Firefox4+, Chrome, Safari6+, IE10+)

测试地址: 

http://p.twinkling.cn/

http://p.twinkling.cn/s1.html

http://p.twinkling.cn/s2.html

http://p.twinkling.cn/s3.html

http://p.twinkling.cn/s4.html

http://p.twinkling.cn/s5.html

http://p.twinkling.cn/bootstrap.html 自定义UI(bootstrap 风格)

下载地址:http://pan.baidu.com/s/1i3kMFmX

              http://git.oschina.net/jiangdx/stream/attach_files

展开阅读全文
打赏
12
22 收藏
分享
加载中
你好,请问stream上传插件tk接口的返回值要怎么获取
06/11 18:29
回复
举报
问下博主, 这步是干嘛的?
if (f.length() != range.getFrom()) {
        /** drop this uploaded data */
        throw new StreamException(StreamException.ERROR_FILE_RANGE_START);
      }
01/14 17:00
回复
举报
java_speed博主
验证文件上传的起始位置,也就是 服务器文件有多大,客户端就应该从多大的位置开始上传,不然文件就对不上了
01/22 16:55
回复
举报
感谢博主
05/27 11:33
回复
举报
感谢 博主
2018/03/17 09:50
回复
举报
做上传下载功能--看到这个操作 好方便
2018/03/17 09:50
回复
举报
java_speed博主

引用来自“nandashen”的评论

多文件上传需要一个 请问这个name属性去哪里定义 还有一个问题怎么能把这个get请求变成post请求
文件上传本身就是post请求,如果说获取token这步的话,你需要自己修改源代码。name默认是文件名,其他参数参考文档twinkling.cn
2017/11/17 14:06
回复
举报
多文件上传需要一个 请问这个name属性去哪里定义 还有一个问题怎么能把这个get请求变成post请求
2017/11/16 10:30
回复
举报
java_speed博主

引用来自“TYG”的评论

楼主,感谢写出这么强大的控件,希望你能继续更新!
1.当父级div display=none时,flash模式无法上传文件,可通过这样解决
var _t = new Stream(config);//在这之后强行更改其div#此处输入软件名

if (_t.bStreaming == false){
//是否支持html5方式上传
$("#i_select_files").css({"width":"100%","height":"50px"});
$("#i_select_files div:last").css({"width":"100%","height":"20px"});
}

2.非tomcat服务器,如Resin, FLash上传时,上传至99.9%出现错误?
在tomcat服务器下也会出现这样的问题,表现为FileItemIterator iter = upload.getItemIterator(req);中,iter取不到值

那是由于在SpringMVC下,这样是真的取不到值,可用以下代码取值:
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
final Map<String, MultipartFile> files = (Map<String, MultipartFile>) multiRequest.getFileMap();
:last这种伪类,在Flash模式下好多浏览器不支持。SpringMVC这种,我猜应该是Form表单上传的方式,等我有空验证。感谢支持
2017/11/08 09:24
回复
举报
TYG
楼主,感谢写出这么强大的控件,希望你能继续更新!
1.当父级div display=none时,flash模式无法上传文件,可通过这样解决
var _t = new Stream(config);//在这之后强行更改其div#此处输入软件名

if (_t.bStreaming == false){
//是否支持html5方式上传
$("#i_select_files").css({"width":"100%","height":"50px"});
$("#i_select_files div:last").css({"width":"100%","height":"20px"});
}

2.非tomcat服务器,如Resin, FLash上传时,上传至99.9%出现错误?
在tomcat服务器下也会出现这样的问题,表现为FileItemIterator iter = upload.getItemIterator(req);中,iter取不到值

那是由于在SpringMVC下,这样是真的取不到值,可用以下代码取值:
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
final Map<String, MultipartFile> files = (Map<String, MultipartFile>) multiRequest.getFileMap();
2017/11/07 16:45
回复
举报

引用来自“冰封丶陌”的评论

楼主,多文件上传的时候onQueueComplete返回的只有最后一个文件的信息,而不是所有文件的集合

引用来自“java_speed”的评论

确实是这样
额好吧,我在把案例整合到.net项目里面的时候,把命名空间改成我项目的命名空间后显示创建上传任务失败:创建上传任务失败[tokenURL=FileUpload.ashx?Method=tk],状态码:500,调试的时候FileUpload.ashx断点都触发不了
2017/07/26 11:05
回复
举报
java_speed博主

引用来自“冰封丶陌”的评论

楼主,多文件上传的时候onQueueComplete返回的只有最后一个文件的信息,而不是所有文件的集合
确实是这样
2017/07/25 11:17
回复
举报
更多评论
打赏
193 评论
22 收藏
12
分享
返回顶部
顶部