提示:由于近期咨询的问题越来多,感觉力不从心,咨询前请先访问http://www.twinkling.cn查看相关文档及常见问题,如果网站已经出现过相关问题,将不再回复!
1、需要描述:
Stream的WEB上传插件支持HTML5,Flash两种方式上传,这包括两个重要的需求:①大文件上传②跨域上传。其上传的主要流程是:①获取token(本域)=》②获取文件要上传到的服务器(跨域) =》③上传文件(跨域)。主要流程更改成常规的流程:①获取token(本域,如果需要跨域,则返回跨域的服务器)=》②上传文件
2、主要特征:
支持HTML5、Flash两种方式(跨域)上传
支持多文件一起上传
HTML5方式支持断点续传,拖拽等新特性
兼容性好IE7+, FF3.6+, Chrome*,Safari4+,遨游等主流浏览器
选择文件的按钮完全可以自定义
进度条、速度、剩余时间等附属信息(网易的UI)
基本的自定义属性及函数,如文件多选、上传成功的响应函数等
示例代码java实现(StreamServlet, FormDataServlet{commons-fileupload的stream api}, TokenServlet)
支持文件夹上传(Chrome21+, Opera15+)
支持自定义UI(V1.4+)
注:Chrome没测试最低版本,不想支持IE6
3、不足:
浏览器兼容性未全部测试(工程太巨大)
windows下的Safari5.1.17多选文件存在问题(初步认定是Safari的bug)
中文编码问题(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