文档章节

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

java_speed
 java_speed
发布于 2013/08/20 15:49
字数 547
阅读 6123
收藏 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
粉丝 112
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
2
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
4
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
4
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0
远程获得的有趣的linux命令

使用这些工具从远程了解天气、阅读资料等。 我们即将结束为期 24 天的 Linux 命令行玩具日历。希望你有一直在看,如果没有,请回到开始,从头看过来。你会发现 Linux 终端有很多游戏、消遣和...

Linux就该这么学
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部