Plupload 上传插件 使用指南 (二)jquery

项目中用到改上传插件,因此抽了一晚上事件把列子和文档看了一下,翻译过来,如有错误的翻译请帮助我一起纠正谢谢。

介绍:

Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制。

特性:

注释: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内核的浏览器。

配置文档说明:

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://www.cnblogs.com/God-Shell/articles/3209708.html

时间: 2024-10-21 02:39:07

Plupload 上传插件 使用指南 (二)jquery的相关文章

Plupload 上传插件 使用指南 jquery

Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代替以前的SWFUpload. Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的<input type=”file” />.Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式.所以你完全不用去操心当前的浏览器支持哪些 上传方式,Plupload会自动为你选择最合

plupload上传插件在SpringMVC中的整合

前言:最近在给学院的网站做一个添加附件的功能,首先到了某某邮箱看了一下,简单实用,但是是flash做的,无法拷贝,就只好上网找插件了.经过筛选,终于找到plupload这款插件(事实上有的编辑器自带添加附件功能).官网只有PHP版本,后来各种百度谷歌,找到的资料都用点小问题,拼搏一天终于实现了功能,下面就把遇到的问题和重点部分写出来,希望遇到同样问题的同学可以参考. 首先你需要下载plupload插件,下载地址:http://www.plupload.com/download/ JSP页面配置如

plupload上传插件绑定事件的两种方法

在经受一天的磨难之后终于找到处理事件方法: 先引用: <script src="js/plupload.full.min.js" type="text/javascript"></script><!--必需引入--> <script src="js/i18n/zh_CN.js" type="text/javascript"></script><!--显示中文--

关于Plupload结合上传插件jquery.plupload.queue的使用

方便日后查阅!! 事例代码: @import url(common/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css) ; src="http://www.iadpush.com/assets/common/jquery-1.8.2.min.js"> src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"> src="

基于jQuery很牛X的批量上传插件

上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的特点:1.简单易配置,2.带进度条上传,3.可批量上传自定义格式文件 1.jQuery File Upload 官网:http://blueimp.github.com/jQuery-File-Upload/ 在线示例:http://blueimp.github.com/jQuery-File-Up

Jquery plupload上传笔记(修改版)

找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,来彰显自己曾经屌丝过,这插件还不错,支持多个上传和预览 首先引用 <link href="~/css/plupload.css" rel="stylesheet" />@*plupload上传*@ <script src="~/Plupload/jquery.plupload.queue.min.js"></script>

jquery uploadify 多文件上传插件 使用经验

Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www.uploadify.com/documentation/uploadify/implementing-uploadify/在我理解的基础上,做了一些翻译吧,建议直接看官网原文,因为截止到发布这篇博客为止,官方的版本是v3.2.1使用之前我们来看下使用的最低要求. 要求 jQuery 1.4.x 或更新的版本Flash Player 9.0.24 或更新的版本服务器端实现

jQuery上传插件Uploadify使用帮助

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……) 通过接口参数和CSS控制外观 使用帮助: 官网地址:http://www.uploadify.com/ 官方参数配置文档

jQuery上传插件Uploadify出现Http Error 302错误解决

前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首 先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行 post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然 就不能获取到session,