文档章节

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

java_speed
 java_speed
发布于 2013/08/20 15:49
字数 547
阅读 6078
收藏 22

提示:由于近期咨询问题越来多,感觉力不从心,咨询访问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

© 著作权归作者所有

共有 人打赏支持
java_speed
粉丝 110
博文 44
码字总数 17031
作品 1
成都
程序员
加载中

评论(189)

卡丁
感谢 博主
卡丁
做上传下载功能--看到这个操作 好方便
java_speed
java_speed

引用来自“nandashen”的评论

多文件上传需要一个 请问这个name属性去哪里定义 还有一个问题怎么能把这个get请求变成post请求
文件上传本身就是post请求,如果说获取token这步的话,你需要自己修改源代码。name默认是文件名,其他参数参考文档twinkling.cn
n
nandashen
多文件上传需要一个 请问这个name属性去哪里定义 还有一个问题怎么能把这个get请求变成post请求
java_speed
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表单上传的方式,等我有空验证。感谢支持
T
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();
冰封丶陌
冰封丶陌

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

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

引用来自“java_speed”的评论

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

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

楼主,多文件上传的时候onQueueComplete返回的只有最后一个文件的信息,而不是所有文件的集合
确实是这样
冰封丶陌
冰封丶陌
楼主,多文件上传的时候onQueueComplete返回的只有最后一个文件的信息,而不是所有文件的集合
java_speed
java_speed

引用来自“Class紫”的评论

楼主,把文件部署到资源服务器,如果把资源服务器的文件上传到阿里云服务器,如何修改STREAM_FILE_REPOSITORY=
和STREAM_CROSS_SERVER=http://customers.duapp.com
这两个参数

引用来自“java_speed”的评论

没太懂你的服务器之间的关系。

引用来自“Class紫”的评论

就是程序部署到A服务器,需要把A服务器的视频上传到阿里云服务器,那个config.properties里面的STREAM_FILE_REPOSITORY参数和STREAM_CROSS_SERVER怎么修改,我没看懂这两个参数的意思
STREAM_CROSS_SERVER指向阿里云服务器(需要部署文件上传),STREAM_FILE_REPOSITORY(这个不需要改,指文件在本地存储位置)
java_speed/stream

#Stream 上传插件 Stream 是解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合! #Stream 简介 Stream 是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux,...

java_speed
2014/04/09
0
0
浏览器上传文件插件--Stream

Stream 是解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合!兼容到浏览器从IE7+, Chrome, FF, Safari以及以这些内核为基础到浏览器(如猎豹,搜狗,360,QQ,傲游等)。...

java_speed
2014/04/09
5.8K
3
Stream上传插件(文件夹上传支持)

HTML5文件夹上传,目前支持的浏览器有Chrome21+, Opera15+。是实现文件夹上传的功能时,主要参考两段JS文件,地址:http://protonet.github.io/plupload/src/javascript/plupload.html5.js(...

java_speed
2014/01/03
0
0
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

日期:2011/11/19 来源:GBin1.com 昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader ,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式...

gbin1
2011/11/19
0
1
7款基于JavaScript和AJAX的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助。 1. jQuery File U...

EDIAGD
2013/09/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows小技巧 – Win+R提高Windows使用效率

追求效率的朋友都需要一款顺手的快速启动工具,Win 平台上有键盘流的RunZ、Listary、ALTRun、Launchy、Wox 和图标流的 Fences、Rolan、 WinLaunch 等,而 Mac 上也有 Alfred、Spotlight。 而...

QQZZFT
4分钟前
0
0
Android 移植ffmpeg报错:"atof" referenced by "libavformat.so"

cannot locate symbol "atof" referenced by "libavformat-57.so"... 原因:android的stdlib.h中atof是内联的, 外部模块不能直接使用。跟android版本有关。 解决办法:将所有的atof改成str...

她叫我小渝
19分钟前
0
0
Java并发编程:volatile关键字解析

volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在Java 5之后,volatile关键字才得以重获生...

engeue
35分钟前
1
0
php-fpm配置文件详解

第一部分:FPM 配置 参数          | 说明 -p            | 命令行中动态修改--prefix   ;include=etc/fpm.d/*.conf  | 用于包含一个或多个文件,如果glob(3)存在(...

bengozhong
37分钟前
1
0
Django允许外部ip访问

1、关闭防火墙 service iptables stop 2、设置django 开启django时,使用0.0.0.0:xxxx,作为ip和端口例如: python manage.py runserver 0.0.0.0:8000 3、在settings里修改ALLOWED_HOSTS = [......

MichaelShu
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部