文档章节

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

java_speed
 java_speed
发布于 2013/08/20 15:49
字数 547
阅读 6038
收藏 22
点赞 12
评论 189

提示:由于近期咨询问题越来多,感觉力不从心,咨询访问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
分享一个HTML5的上传jQuery插件 - jQuery HTML5 uploader

随着HTML5的使用越来越被大家接受,基于HTML5的技术和插件也会变得越来越广泛,今天我们介绍一款基于HTML5和jQuery的上传插件: jQuery HTML5 uploader。 使用这个插件将会使得文件上传变得简...

gbin1
2011/11/19
0
0
Stream上传插件后续功能 - 文件夹上传

Stream上传插件是我对过去工作的一个总结,支持Flash、HTML5两种上传模式,Flash模式下最大单个文件大小是2G,而HTML5却没有限制,基本上可以满足大多数人的WEB上传需要。 到目前为止,有两个...

java_speed
2013/12/25
0
4
Nodejs express、html5实现拖拽上传

Nodejs express、html5实现拖拽上传 一、前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题...

james_laughing
2015/06/02
0
0
原生Javascript+HTML5一步步实现拖拽排序

前言 本文的内容就如题所述,之所以写这么个东西是有原因的,因为这两天重做公司的一个功能发现里面需要一个拖拽排序的功能.以前都是使用jquery各种插件去搞,因为这个项目不限制浏览器兼容问题...

顽Shi
2014/04/05
0
6
javascript 使用Html5 File Api进行文件读取

javascript 使用Html File Api进行文件读取,注意“读取”是只读不写,不可以主动获取浏览器所在主机的文件列表。 Html5 中 FileApi主要有 FileUpload, File,FileList,FileError,Blob,Fil...

IamOkay
2014/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
44分钟前
2
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
1
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
148
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部