Stream上传插件(js设计)

原创
2013/11/29 16:13
阅读数 4.5K

1、概述

javascript是一种弱类型的语言,变量在运行的过程中可能从一种类型转变成另外一种类型,所以编码规范就非常重要了(stream.js主要参考网易的js命名规则:http://blog.jobbole.com/19197/)。javascript也是具有OOP的思想(继承,对象等,但接口就基本没有),可以方便地调用不同对象。

2、对象间关系

   主要有Parent、fRegEvents、Provider(接口)、StreamProvider、SWFProvider、Uploader(接口)、StreamUploader、SWFUploader。大致关系如下:

3、工作流程

初始化的方式如下:

var cfg = {
   multipleFiles: true
};
var m = new Main(cfg);

现在来 解析new Main(cfg)过程:

_________________
 |  new Main(cfg)  |
  -----------------
        |
        V
1. Main.set() # 把cfg的参数保存到环境中
        |
        V
2. Main.initialzer()
        |
        |----> a) 生成文件选择容器(此处可以满足自定义文件选择按钮的样式)
        |
        |----> b) 生成文件上传的容器
        |
        |----> c) new Provider() # 绑定不同的文件选择UI(注:这个在页面中是隐藏的)
        |                        # 注册文件选择的事件(注:HTML5的drag事件也是在此注册)
        |----> d) 绑定Provider的上传事件到Main的监听函数
        |
        |----> e) 注册window的unload事件
        V
3. Main.fileSelect() # 响应文件选择后的onfileselect事件
        |
        |----> *) 校验文件(文件数量、扩展名、大小等)
        V
4. Main.addStreamTask() # 添加文件到上传容器
        |
        V
5. Main.upload()
        |
        |----> a) 调用服务器的`/tk`,获取文件token
        |
        |----> b) 待a)成功返回后,开始上传文件
        V
6. Provider.upload()
        |     # 监听Uploader的上传事件(onuploadstart, onuploadprogress等)
        V
7. Uploader.startUpload() # 监听自身上传事件,然后向上发`uploadstart`等事件
        |
        V
8. Provider接收监听事件
        |
        V
9. Main接收监听事件   # 注:接收到事件后,会响应,比如上传百分比,上传完成,错误信息等
        |          
        V
10. Main接收到uploadcomplete事件后
        |
        |----> a) 移除`删除`按钮
        |
        |----> b) 重复步骤5),开始上传下一个文件
       ...
        |
        V
11. 上传结束

最后,附上一张调用关系图:

                                   
插件主页:http://www.twinkling.cn/

展开阅读全文
打赏
1
9 收藏
分享
加载中

引用来自“沙场-小白”的评论

基于springMVC框架,无法实现跨域上传,是否因为“常见问题”中的不支持该框架,其中的exclude所有uri具体怎么操作,在线求指教,我是这样写的
  <context:component-scan base-package="cn.outofmemory.spring" use-default-filters="false">
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.TokenServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.StreamServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.FormDataServlet"/>
   </context:component-scan>

引用来自“java_speed”的评论

配置web.xmlstream所使用uri,具体参考web.xml文件

引用来自“沙场-小白”的评论

配置了,本地是可以正常上传的,可是服务放在远程服务器上,本地通过域名访问无法实现上传,是否与springMVC框架有关,这个是无法实现的么?

引用来自“java_speed”的评论

那就是你服务器的设置问题,一般服务器都有限制包大小,你需要咨询服务器部署人员
也就是说,springMVC框架集成stream,不用特殊的配置,跨域上传是没有任何问题的?
2015/07/21 14:05
回复
举报
java_speed博主

引用来自“沙场-小白”的评论

基于springMVC框架,无法实现跨域上传,是否因为“常见问题”中的不支持该框架,其中的exclude所有uri具体怎么操作,在线求指教,我是这样写的
  <context:component-scan base-package="cn.outofmemory.spring" use-default-filters="false">
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.TokenServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.StreamServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.FormDataServlet"/>
   </context:component-scan>

引用来自“java_speed”的评论

配置web.xmlstream所使用uri,具体参考web.xml文件

引用来自“沙场-小白”的评论

配置了,本地是可以正常上传的,可是服务放在远程服务器上,本地通过域名访问无法实现上传,是否与springMVC框架有关,这个是无法实现的么?
那就是你服务器的设置问题,一般服务器都有限制包大小,你需要咨询服务器部署人员
2015/07/21 08:59
回复
举报

引用来自“沙场-小白”的评论

基于springMVC框架,无法实现跨域上传,是否因为“常见问题”中的不支持该框架,其中的exclude所有uri具体怎么操作,在线求指教,我是这样写的
  <context:component-scan base-package="cn.outofmemory.spring" use-default-filters="false">
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.TokenServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.StreamServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.FormDataServlet"/>
   </context:component-scan>

引用来自“java_speed”的评论

配置web.xmlstream所使用uri,具体参考web.xml文件
配置了,本地是可以正常上传的,可是服务放在远程服务器上,本地通过域名访问无法实现上传,是否与springMVC框架有关,这个是无法实现的么?
2015/07/21 08:57
回复
举报
java_speed博主

引用来自“沙场-小白”的评论

基于springMVC框架,无法实现跨域上传,是否因为“常见问题”中的不支持该框架,其中的exclude所有uri具体怎么操作,在线求指教,我是这样写的
  <context:component-scan base-package="cn.outofmemory.spring" use-default-filters="false">
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.TokenServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.StreamServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.FormDataServlet"/>
   </context:component-scan>
配置web.xmlstream所使用uri,具体参考web.xml文件
2015/07/14 17:10
回复
举报
java_speed博主

引用来自“沙场-小白”的评论

基于springMVC框架,无法实现跨域上传,是否因为“常见问题”中的不支持该框架,其中的exclude所有uri具体怎么操作,在线求指教,我是这样写的
  <context:component-scan base-package="cn.outofmemory.spring" use-default-filters="false">
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.TokenServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.StreamServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.FormDataServlet"/>
   </context:component-scan>
参考这个:http://blog.brunoraljic.com/how-to-exclude-css-and-js-files-from-spring-mvc-dispatcher-mapping/ 基本上就是在web.xml配置 TokenServlet cn.twinkling.stream.servlet.TokenServlet 0 TokenServlet /tk StreamServlet cn.twinkling.stream.servlet.StreamServlet 0 StreamServlet /upload FormDataServlet cn.twinkling.stream.servlet.FormDataServlet 0 FormDataServlet /fd
2015/07/14 17:09
回复
举报
基于springMVC框架,无法实现跨域上传,是否因为“常见问题”中的不支持该框架,其中的exclude所有uri具体怎么操作,在线求指教,我是这样写的
  <context:component-scan base-package="cn.outofmemory.spring" use-default-filters="false">
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.TokenServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.StreamServlet"/>
    <context:exclude-filter type="regex" expression="com.dzit.sng.wp.stream.servlet.FormDataServlet"/>
   </context:component-scan>
2015/07/14 10:33
回复
举报
java_speed博主

引用来自“水晶ball”的评论

上传的文件如何能按照不同的会话存放到不同的路径目录下

引用来自“java_speed”的评论

自己修改源码

引用来自“水晶ball”的评论

能否提示下在哪块修改
你在文件保存之前加个文件夹就行。你看看文件夹上传的原理你就知道怎么做了
2015/06/17 12:45
回复
举报

引用来自“水晶ball”的评论

上传的文件如何能按照不同的会话存放到不同的路径目录下

引用来自“java_speed”的评论

自己修改源码
能否提示下在哪块修改
2015/06/17 09:00
回复
举报
java_speed博主

引用来自“水晶ball”的评论

上传的文件如何能按照不同的会话存放到不同的路径目录下
自己修改源码
2015/06/16 19:49
回复
举报
上传的文件如何能按照不同的会话存放到不同的路径目录下
2015/06/16 16:37
回复
举报
更多评论
打赏
18 评论
9 收藏
1
分享
返回顶部
顶部