关于Plupload结合上传插件jquery.plupload.queue的使用
配置文档说明：
Browse_button:触发浏览文件按钮标签的唯一id,,在flash、html5、和silverlight中能找到触发事件的源（我理解的，这个参数在队列部件不需要参见）
Container: 展现上传文件列表的容器，[默认是body]
chunk_size：当上传文件大于服务器接收端文件大小限制的时候，可以分多次请求发给服务器，如果不需要从设置中移出
drop_element：当浏览器支持拖拽的情况下，能够文件拖放到你想要的容器ID里
file_data_name：设置上传字段的名称。默认情况下被设置为文件。（我试验了没找到该如何使用它，暂且不提）
filters:选择文件扩展名的过滤器,每个过滤规则中只有title和ext两项[{title:'', extensions:''}]
flash_swf_url:flash文件地址
headers：自定义的插入http请求的键值对
max_file_size：最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
multipart：布尔值，如果用mutlipart 代替二进制流的方式，在webkit下无法工作
multipart_params： 跟 multipart关联在一起的键值对
multi_selection： 多选对话框
resize：修改图片属性 resize: {width: 320, height: 240, quality: 90}
runtimes:上传插件初始化选用那种方式的优先级顺序，如果第一个初始化失败就走第二个，依次类推
required_features：需要那些特性，才能初始化插件
url：上传服务器地址
unique_names：是否生成唯一的文件名，避免与服务器文件重名
urlstream_upload：布尔值 如果是flash上传应该用URLStream 代替FileReference.upload
jquery部件的属性：
dragdrop：是否支持拖拽，默认值true
multiple_queues：是否可以多次上传
preinit：插件初始化前回调函数
rename：布尔值，上传之前可以重命名文件，默认false，木有找到如何重命名啊
API文档：
方法列表：
Uploader(setting)：创建实例的构造方法
var uploader = new plupload.Uploader({ runtimes : 'gears,html5,flash', browse_button : 'button_id'}); |
bind(event, function[, scope])：绑定事件
uploader.bind('Init', function(up) { alert('Supports drag/drop: ' + (!!up.features.dragdrop));}); |
destroy()：销毁plupload的实例对象
uploader.destroy() |
getFile(id): 获取上传文件信息
uploader.bind('FilesAdded', function(up, files) { for (var i in files) { up.getFile(files[i].id); }});<span style="color: #ff0000; font-size: 13px;"> </span> |
注：file：{
id:文件编号,
loaded: 已经上传多少字节,
name: 文件名,
percent: 上传进度,
size: 文件大小,
status: 有四种状态 QUEUED, UPLOADING, FAILED, DONE.对应数值
}
init:初始化plupload实例，添加监听对象
uploader.destroy() |
refresh：重新实例化uploader
removeFile(id):从file中移除某个文件
splice(start,length)：从队列中start开始删除length个文件， 返回被删除的文件列表
start() 开始上传
stop()停止上传
unbind(name, function): 接触事件绑定
unbindAll()解绑所有事件
属性集合：
features：uploader中包含那些特性
files:当前队列中的文件列表
id：uploader实例的唯一id
runtime：当前运行环境（是html5、flash等等)
state:当前上传进度状态
total：当前上传文件的信息集合
事件集合:（up为uploader缩写）
BeforeUpload(up, file)：文件上传完之前触发的事件
ChunkUploaded(up, file,response)文件被分块上传的事件
Destroy(up):uploader的destroy调用的方法
Error(up, err)：上传出错的时候触发
Fileadded(up, files):用户选择文件时触发
FileRemoved(up, files):当文件从上传队列中移除触发
FileUploaded(up, file, res):文件上传成功的时候触发
Init(up):当初始化的时候触发
PostInit(up):init执行完以后要执行的事件触发
QueueChanged(up):当文件队列变化时触发
Refresh(up):当silverlight/flash或是其他运行环境需要移动的时候触发
StateChanged(up)当整个上传队列被改变的时候触发
UploadComplete(up,file)当队列中所有文件被上传完时触发
UploadFile(up,file)当一个文件被上传的时候触发
UploadProgress(up,file):当文件正在被上传中触发
参见：
示例：http://plupload.com/example_queuewidget.php
API:http://plupload.com/plupload/docs/api/index.html
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="common/plupload/moxie.js"></script>
<script type="text/javascript" src="common/plupload/plupload.dev.js"></script> <!-- Load Queue widget CSS and jQuery -->
<style type="text/css"> @importurl(common/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);</style> <script type="text/javascript" src="http://www.iadpush.com/assets/common/jquery-1.8.2.min.js"></script> <!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script> <!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
<script type="text/javascript" src="common/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js"></script> </head> <body>
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div> <script>
$('#uploader').pluploadQueue({
url : 'Upload',
filters : [ {
title : "Image files",
extensions : "jpg,gif,png"
} ],
rename : true,
flash_swf_url : 'common/plupload/Moxie.swf',
silverlight_xap_url : 'common/plupload/Moxie.xap',
filters : {
max_file_size : '100mb',
mime_types : [ {
title : "Image files",
extensions : "jpg,gif,png"
}, {
title : "Zip files",
extensions : "zip,apk,doc,exe"
} ]
}
});
</script>
</body>
</html>
特性：
注释：1、gears：http://zh.wikipedia.org/wiki/Gears
2、Silverlight：http://zh.wikipedia.org/wiki/Silverlight
3、browserplus: http://developer.yahoo.com/browserplus/
注意：1、分块:chrome和firefox 4+ 支持。
2、拖拽适用于firefox和webkit内核的浏览器，windows版的safari还存在一些问题待解决。
3、图片缩放仅在firefox3.5+和chrome上支持，safari/opera 不支持直接数据访问选定的文件。
4、目前所有的浏览器不支持文件类型过滤。但是，我们填写HTML5的接受文件类型过滤属性，一旦有支持它会工作。
5、 多文件上传仅支持gecko和webkit内核的浏览器。
借鉴：http://www.boyunjian.com/v/softd/Plupload.html
关于Plupload结合上传插件jquery.plupload.queue的使用的更多相关文章
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- jquery上传插件Jquery.uploadify.js-转
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
- JQuery文件上传插件JQuery.upload.js的用法简介
JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
- 【web】之 jquery上传插件的Plupload的使用
首先下载plupload->http://www.plupload.com 因为Plupload可配置参数比较多,所以这里讲解最常用的,结合jquery-ui展示的界面!如下: Plupload ...
- plupload 异步上传插件使用心得
plupload 可以不依赖jquery,并且提供了 html5,flash,silverlight,html4 多种上传模式,使用起来比较简单,上一篇博客中介绍了其主要参数哈函数 一.简化用法 &l ...
- plupload文件上传插件
一 资源文档 二 基本使用 三 可能遇到的问题 一 资源文档 Git仓库地址:https://github.com/moxiecode/plupload 一个中文速查:http://www.cnblo ...
- 图片裁剪上传插件——jquery.photoClip.js
想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js] ...
- Plupload上传插件简单整理
Plupload Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部 ...
- Thinkphp5+plupload图片上传功能，支持实时预览图片。
今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
随机推荐
- IOS启动页设置适应ios8/9
直接上截图 1. 添加对应尺寸的图 2.设置三项 3.去掉默认设置 4.特别的xcode 7 需 通过在p.list配置文件中增加节点: Launch image 类型为String 设置值为Defa ...
- Open-Drain与Push-Pull
GPIO的功能,简单说就是可以根据自己的需要去配置为输入或输出.(General Purpose Input Output,简称为GPIO或总线扩展器,利用工业标准I2C.SMBus?或SPI?接口简 ...
- [ActionScript 3.0] AS3.0 将图像的Alpha通道转换为黑白图像(分离ARGB方式)
import flash.display.BitmapData; import flash.display.Bitmap; /** * 将图像的Alpha通道转换为黑白图像(分离ARGB方式) */ ...
- OLAT & OLTP
联机事务处理(OLTP)和联机分析处理(OLAP)的不同,主要通过以下五点区分开来. 用户和系统的面向性: OLTP是面向顾客的,用于事务和查询处理 OLAP是面向市场的,用于数据分析 数据内容: O ...
- 【转】提高VR渲染速度的最好方法（经典转载）
VR的基本渲染方法掌握起来并不难,但是最迫切需要解决的问题是VR的出图速度问题.动则需要数小时的渲染时间真的是很难以接受,我们从三个影响速度的参数结合网上一些高手的教程来分析一下. 一.Irradia ...
- Jquery Datatables 请求参数及接收参数处理
Jquery Datatables 请求参数及接收参数处理 /** * Created by wb-wuyifu on 2016/8/9. */ /** * Created by wb-wuyifu ...
- (转)这个API很“迷人”——新的Fetch API
原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...
- make: g77: Command not found
编译cblas时报错,这时,修改Makefile.in中的编译文件中的g77为gfortran
- 4.openssl passwd
该伪命令用于生成加密的密码. [root@xuexi tmp]# whatis passwd ) - update user's authentication tokens ) - password ...
- 【过程改进】10分钟进阶Nuget
目录 nuget初识 nuget本地包 nuget解决依赖冲突 nuget是什么 .net版的maven(java)? 如果你用过windows的chocolatey,mac的homebrew或许更容 ...