Stream上传插件(HTML5支持拖拽、断点续传)
Stream上传插件(HTML5支持拖拽、断点续传)
java_speed 发表于5年前
Stream上传插件(HTML5支持拖拽、断点续传)
  • 发表于 5年前
  • 阅读 5866
  • 收藏 22
  • 点赞 12
  • 评论 187

新睿云服务器60天免费使用,快来体验!>>>   

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

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 108
博文 44
码字总数 17031
作品 1
评论 (187)
____hello
楼主有案列吗
java_speed

引用来自“____hello”的评论

楼主有案列吗

没有!但是有在线测试的地址:http://p.twinkling.cn/
____hello

引用来自“java_speed”的评论

引用来自“____hello”的评论

楼主有案列吗

没有!但是有在线测试的地址:http://p.twinkling.cn/

中文乱码
java_speed

引用来自“____hello”的评论

引用来自“java_speed”的评论

引用来自“____hello”的评论

楼主有案列吗

没有!但是有在线测试的地址:http://p.twinkling.cn/

中文乱码

如果在IE10以下,FF4以下等版本浏览器测试,请检测你的Flash插件的问题。
如果说是在你自己的环境中测试,在tomcat中请设置server.xml中的URIEncoding="UTF-8"属性
____hello
怎么多文件上传啊? 我选择一个文件上传后,不能接着选择了??
java_speed

引用来自“____hello”的评论

怎么多文件上传啊? 我选择一个文件上传后,不能接着选择了??

<a href='http://www.twinkling.cn/'>http://www.twinkling.cn/</a> 上面有文档。选择完文件,上传的按钮会隐藏。
dongjunqing
本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????
java_speed

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

dongjunqing
本地部署在IE浏览器上传文件失败:提示: HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 是为什么啊???
dongjunqing

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

我是下载源码的,不是war包。

java_speed

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

引用来自“dongjunqing”的评论

我是下载源码的,不是war包。

eclipse上启动,默认是带项目名称的,你需要自定义几个参数 var config = { maxSize: 10485760 /** 单个文件的最大大小,默认:2G */ tokenURL : "/项目名/tk", /** 根据文件名、大小等信息获取Token的URI(用于生成断点续传、跨域的令牌) */ frmUploadURL : "/项目名/fd;", /** Flash上传的URI */ uploadURL : "/项目名/upload", /** HTML5上传的URI */ }; new Stream(config);

dongjunqing

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

我是用一个iframe引用上传功能页面(bootstrap.html)后,在火狐内可以正常上传,但在IE上却提示该错误信息。还有那个crossdomain.xml 我没有拷到我的测试程序中。

java_speed

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

引用来自“dongjunqing”的评论

我是用一个iframe引用上传功能页面(bootstrap.html)后,在火狐内可以正常上传,但在IE上却提示该错误信息。还有那个crossdomain.xml 我没有拷到我的测试程序中。

iframe的方式没试过。你可能需要自己搞定

dongjunqing

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

引用来自“dongjunqing”的评论

我是用一个iframe引用上传功能页面(bootstrap.html)后,在火狐内可以正常上传,但在IE上却提示该错误信息。还有那个crossdomain.xml 我没有拷到我的测试程序中。

引用来自“java_speed”的评论

iframe的方式没试过。你可能需要自己搞定

好吧,再问下,那个crossdomain.xml 文件是怎么用的 啊?

java_speed

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

引用来自“dongjunqing”的评论

我是用一个iframe引用上传功能页面(bootstrap.html)后,在火狐内可以正常上传,但在IE上却提示该错误信息。还有那个crossdomain.xml 我没有拷到我的测试程序中。

引用来自“java_speed”的评论

iframe的方式没试过。你可能需要自己搞定

引用来自“dongjunqing”的评论

好吧,再问下,那个crossdomain.xml 文件是怎么用的 啊?

这个flash上传方式跨域上传需要的一个文件。具体你可以搜索“Flash 跨域上传”。默认提供的那个crossdomain.xml是允许任何域

dongjunqing

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

引用来自“dongjunqing”的评论

我是用一个iframe引用上传功能页面(bootstrap.html)后,在火狐内可以正常上传,但在IE上却提示该错误信息。还有那个crossdomain.xml 我没有拷到我的测试程序中。

引用来自“java_speed”的评论

iframe的方式没试过。你可能需要自己搞定

引用来自“dongjunqing”的评论

好吧,再问下,那个crossdomain.xml 文件是怎么用的 啊?

引用来自“java_speed”的评论

这个flash上传方式跨域上传需要的一个文件。具体你可以搜索“Flash 跨域上传”。默认提供的那个crossdomain.xml是允许任何域

问题找到了,在IE下上传文件时候cookie和“/fd”之间缺少“;”号,导致找不到请求地址。具体代码在stream-v1.js里的self.uploadFile(file, frmUploadURL + document.cookie, token, "formUpload"); 。rmUploadURL和cookie间缺少“;”。

java_speed

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

引用来自“dongjunqing”的评论

我是用一个iframe引用上传功能页面(bootstrap.html)后,在火狐内可以正常上传,但在IE上却提示该错误信息。还有那个crossdomain.xml 我没有拷到我的测试程序中。

引用来自“java_speed”的评论

iframe的方式没试过。你可能需要自己搞定

引用来自“dongjunqing”的评论

好吧,再问下,那个crossdomain.xml 文件是怎么用的 啊?

引用来自“java_speed”的评论

这个flash上传方式跨域上传需要的一个文件。具体你可以搜索“Flash 跨域上传”。默认提供的那个crossdomain.xml是允许任何域

引用来自“dongjunqing”的评论

问题找到了,在IE下上传文件时候cookie和“/fd”之间缺少“;”号,导致找不到请求地址。具体代码在stream-v1.js里的self.uploadFile(file, frmUploadURL + document.cookie, token, "formUpload"); 。rmUploadURL和cookie间缺少“;”。

需要手动加入document.cookie只有firefox需要,其他浏览器不需要。最新的js文件中已经修复这个问题了:#stream# http://git.oschina.net/jiangdx/stream/raw/master/src/main/webapp/js/stream-v1.js

dongjunqing

引用来自“java_speed”的评论

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

引用来自“dongjunqing”的评论

我是用一个iframe引用上传功能页面(bootstrap.html)后,在火狐内可以正常上传,但在IE上却提示该错误信息。还有那个crossdomain.xml 我没有拷到我的测试程序中。

引用来自“java_speed”的评论

iframe的方式没试过。你可能需要自己搞定

引用来自“dongjunqing”的评论

好吧,再问下,那个crossdomain.xml 文件是怎么用的 啊?

引用来自“java_speed”的评论

这个flash上传方式跨域上传需要的一个文件。具体你可以搜索“Flash 跨域上传”。默认提供的那个crossdomain.xml是允许任何域

引用来自“dongjunqing”的评论

问题找到了,在IE下上传文件时候cookie和“/fd”之间缺少“;”号,导致找不到请求地址。具体代码在stream-v1.js里的self.uploadFile(file, frmUploadURL + document.cookie, token, "formUpload"); 。rmUploadURL和cookie间缺少“;”。

需要手动加入document.cookie只有firefox需要,其他浏览器不需要。最新的js文件中已经修复这个问题了:#stream# http://git.oschina.net/jiangdx/stream/raw/master/src/main/webapp/js/stream-v1.js

如何才能让IE9支持断点呢?
java_speed

引用来自“dongjunqing”的评论

引用来自“java_speed”的评论

引用来自“dongjunqing”的评论

本地部署,进行上传的时候失败:HTTP 404 status code received., 状态码:404Error #2038, 状态码:-1 这是为什么啊????

引用来自“java_speed”的评论

请参考http://git.oschina.net/jiangdx/stream/wikis/quick-start。 你确定修改stream-v*.war 修改为ROOT.war了吗?就是说要先清空tomcat/webapps/目录下的文件,然后把ROOT.war放到tomcat/webapps目录下,重启就可以了

引用来自“dongjunqing”的评论

我是用一个iframe引用上传功能页面(bootstrap.html)后,在火狐内可以正常上传,但在IE上却提示该错误信息。还有那个crossdomain.xml 我没有拷到我的测试程序中。

引用来自“java_speed”的评论

iframe的方式没试过。你可能需要自己搞定

引用来自“dongjunqing”的评论

好吧,再问下,那个crossdomain.xml 文件是怎么用的 啊?

引用来自“java_speed”的评论

这个flash上传方式跨域上传需要的一个文件。具体你可以搜索“Flash 跨域上传”。默认提供的那个crossdomain.xml是允许任何域

引用来自“dongjunqing”的评论

问题找到了,在IE下上传文件时候cookie和“/fd”之间缺少“;”号,导致找不到请求地址。具体代码在stream-v1.js里的self.uploadFile(file, frmUploadURL + document.cookie, token, "formUpload"); 。rmUploadURL和cookie间缺少“;”。

需要手动加入document.cookie只有firefox需要,其他浏览器不需要。最新的js文件中已经修复这个问题了:#stream# http://git.oschina.net/jiangdx/stream/raw/master/src/main/webapp/js/stream-v1.js

如何才能让IE9支持断点呢?

IE9是不能支持的。不过微软有个插件可以做。但是比较恶心,因为微软本身也放弃了

dongjunqing
发现一个BUG,IE浏览器内进行批量上传文件时,第一次可以正常上传,可是第二次就会无法上传了
×
java_speed
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: