Plupload文件上传组件使用API

Plupload有以下功能和特点:

1、拥有多种上传方式:HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些 上传方式,Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片,即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据,这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传,因为有些浏览器对很大的文件比如几G的一些文件无法上传。

 

使用Plupload的关键是了解它众多的配置参数、事件以及属性和方法。

目录:

一、配置参数

二、各种事件说明

三、Plupload实例的属性

四、Plupload实例的方法

五、文件对象的属性和方法

六、QueueProgress 对象的属性

七、plupload命名空间上的一些属性

一、配置参数

实例化一个plupload对象时,也就是 new plupload.Uploader(),需要传入一个对象作为配置参数。后面内容中出现的plupload实例均是指new plupload.Uploader()得到的实例对象

属性类型默认值描述
browse_buttonString / DOM 触发文件选择对话框的DOM元素,当点击该元素后便后弹出文件选择对话框。该值可以是DOM元素对象本身,也可以是该DOM元素的id
urlString 服务器端接收和处理上传文件的脚本地址,可以是相对路径(相对于当前调用Plupload的文档),也可以是绝对路径
filtersObject{ }可以使用该参数来限制上传文件的类型,大小等,该参数以对象的形式传入,它包括三个属性:

mime_types:用来限定上传文件的类型,为一个数组,该数组的每个元素又是一个对象,该对象有title和extensions两个属性,title为该过滤器的名称,extensions为文件扩展名,有多个时用逗号隔开。该属性默认为一个空数组,即不做限制。

max_file_size:用来限定上传文件的大小,如果文件体积超过了该值,则不能被选取。值可以为一个数字,单位为b,也可以是一个字符串,由数字和单位组成,如‘200kb‘

prevent_duplicates:是否允许选取重复的文件,为true时表示不允许,为false时表示允许,默认为false。如果两个文件的文件名和大小都相同,则会被认为是重复的文件

filters完整的配置示例如下(当然也可以只配置其中的某一项):

filters: {mime_types : [ //只允许上传图片和zip文件{ title : "Image files", extensions : "jpg,gif,png" }, { title : "Zip files", extensions : "zip" }],max_file_size : ‘400kb‘, //最大只能上传400kb的文件prevent_duplicates : true //不允许选取重复文件
}
headersObject 设置上传时的自定义头信息,以键/值对的形式传入,键代表头信息属性名,键代表属性值。html4上传方式不支持设置该属性。
multipartBooleantruetrue时将以multipart/form-data的形式来上传文件,为false 时则以二进制的格式来上传文件。html4上传方式不支持以二进制格式来上传文件,在flash上传方式中,二进制上传也有点问题。并且二进制格式上传还 需要在服务器端做特殊的处理。一般我们用multipart/form-data的形式来上传文件就足够了。
multipart_paramsObject 上传时的附加参数,以键/值对的形式传入,服务器端可是使用$_POST来获取这些参数(以php为例)。比如:
multipart_params: {one: ‘1‘,two: ‘2‘,three: { //值还可以是一个字面量对象a: ‘4‘,b: ‘5‘},four: [‘6‘, ‘7‘, ‘8‘]  //也可以是一个数组
}
max_retriesNumber0当发生plupload.HTTP_ERROR错误时的重试次数,为0时表示不重试
chunk_sizeNumber/String0分片上传文件时,每片文件被切割成的大小,为数字时单位为字节。也可以使用一个带单位的字符串,如"200kb"。当该值为0时表示不使用分片上传功能
resizeObject 可以使用该参数对将要上传的图片进行压缩,该参数是一个对象,里面包括5个属性:

width:指定压缩后图片的宽度,如果没有设置该属性则默认为原始图片的宽度

height:指定压缩后图片的高度,如果没有设置该属性则默认为原始图片的高度

crop:是否裁剪图片

quality:压缩后图片的质量,只对jpg格式的图片有效,默认为90。quality可以跟widthheight一起使用,但也可以单独使用,单独使用时,压缩后图片的宽高不会变化,但由于质量降低了,所以体积也会变小

preserve_headers:压缩后是否保留图片的元数据,true为保留,false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点

resize参数的配置示例如下:

resize: {width: 100,height: 100,crop: true,quality: 60,preserve_headers: false
}
drop_elementDOM/String/Array 指定了使用拖拽方式来选择上传文件时的拖拽区域,即可以把文件拖拽到这个区域的方式来选择文件。该参数的值可以为一个DOM元素的id,也可是 DOM元素本身,还可以是一个包括多个DOM元素的数组。如果不设置该参数则拖拽上传功能不可用。目前只有html5上传方式才支持拖拽上传。
multi_selectionBooleantrue是否可以在文件浏览对话框中选择多个文件,true为可以,false为不可以。默认true,即可以选择多个文件。需要注意的是,在某些不支持 多选文件的环境中,默认值是false。比如在ios7的safari浏览器中,由于存在bug,造成不能多选文件。当然,在html4上传方式中,也是 无法多选文件的。
required_featuresMix 可以使用该参数来设置你必须需要的一些功能特征,Plupload会根据你的设置来选择合适的上传方式。因为,不同的上传方式,支持的功能是不同 的,比如拖拽上传只有html5上传方式支持,图片压缩则只有html5,flash,silverlight上传方式支持。该参数的值是一个混合类型, 可以是一个以逗号分隔的字符串,
unique_namesBooleanfalse当值为true时会为每个上传的文件生成一个唯一的文件名,并作为额外的参数post到服务器端,参数明为name,值为生成的文件名。
runtimesStringhtml5,flash,
silverlight,
html4
用来指定上传方式,指定多个上传方式请使用逗号隔开。一般情况下,你不需要配置该参数,因为Plupload默认会根据你的其他的参数配置来选择 最合适的上传方式。如果没有特殊要求的话,Plupload会首先选择html5上传方式,如果浏览器不支持html5,则会使用flash或 silverlight,如果前面两者也都不支持,则会使用最传统的html4上传方式。如果你想指定使用某个上传方式,或改变上传方式的优先顺序,则你 可以配置该参数。
file_data_nameStringfile指定文件上传时文件域的名称,默认为file,例如在php中你可以使用$_FILES[‘file‘]来获取上传的文件信息
containerDOM/String 用来指定Plupload所创建的html结构的父容器,默认为前面指定的browse_button的父元素。该参数的值可以是一个元素的id,也可以是DOM元素本身。
flash_swf_urlStringjs/Moxie.swfflash上传组件的url地址,如果是相对路径,则相对的是调用Plupload的html文档。当使用flash上传方式会用到该参数。
silverlight_xap_urlStringjs/Moxie.xapsilverlight上传组件的url地址,如果是相对路径,则相对的是调用Plupload的html文档。当使用silverlight上传方式会用到该参数。

二、各种事件说明

要了解plupload的运行状况,靠的就是在这些事件了

Init
当Plupload初始化完成后触发

监听函数参数:(uploader)

uploader为当前的plupload实例对象

PostInit
当Init事件发生后触发

监听函数参数:(uploader)

uploader为当前的plupload实例对象

OptionChanged
当使用Plupload实例的setOption()方法改变当前配置参数后触发

监听函数参数:(uploader,option_name,new_value,old_value)

uploader为当前的plupload实例对象,option_name为发生改变的参数名称,new_value为改变后的值,old_value为改变前的值

Refresh
当调用plupload实例的refresh()方法后会触发该事件,暂时不清楚还有什么其他动作会触发该事件,但据我测试,把文件添加到上传队列后也会触发该事件。

监听函数参数:(uploader)

uploader为当前的plupload实例对象

StateChanged
当上传队列的状态发生改变时触发

监听函数参数:(uploader)

uploader为当前的plupload实例对象

UploadFile
当上传队列中某一个文件开始上传后触发

监听函数参数:(uploader,file)

uploader为当前的plupload实例对象,file为触发此事件的文件对象

BeforeUpload
当队列中的某一个文件正要开始上传前触发

监听函数参数:(uploader,file)

uploader为当前的plupload实例对象,file为触发此事件的文件对象

QueueChanged
当上传队列发生变化后触发,即上传队列新增了文件或移除了文件。QueueChanged事件会比FilesAdded或FilesRemoved事件先触发

监听函数参数:(uploader)

uploader为当前的plupload实例对象

UploadProgress
会在文件上传过程中不断触发,可以用此事件来显示上传进度

监听函数参数:(uploader,file)

uploader为当前的plupload实例对象,file为触发此事件的文件对象

FilesRemoved
当文件从上传队列移除后触发

监听函数参数:(uploader,files)

uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次事件所移除的文件对象

FileFiltered
暂不清楚该事件的意义,但根据测试得出,该事件会在每一个文件被添加到上传队列前触发

监听函数参数:(uploader,file)

uploader为当前的plupload实例对象,file为触发此事件的文件对象

FilesAdded
当文件添加到上传队列后触发

监听函数参数:(uploader,files)

uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次添加到上传队列里的文件对象

FileUploaded
当队列中的某一个文件上传完成后触发

监听函数参数:(uploader,file,responseObject)

uploader为当前的plupload实例对象,file为触发此事件的文件对象,responseObject为服务器返回的信息对象,它有以下3个属性:

response:服务器返回的文本

responseHeaders:服务器返回的头信息

status:服务器返回的http状态码,比如200

ChunkUploaded
当使用文件小片上传功能时,每一个小片上传完成后触发

监听函数参数:(uploader,file,responseObject)

uploader为当前的plupload实例对象,file为触发此事件的文件对象,responseObject为服务器返回的信息对象,它有以下5个属性:

offset:该文件小片在整体文件中的偏移量

response:服务器返回的文本

responseHeaders:服务器返回的头信息

status:服务器返回的http状态码,比如200

total:该文件(指的是被切割成了许多文件小片的那个文件)的总大小,单位为字节

UploadComplete
当上传队列中所有文件都上传完成后触发

监听函数参数:(uploader,files)

uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次已完成上传的所有文件对象

Error
当发生错误时触发

监听函数参数:(uploader,errObject)

uploader为当前的plupload实例对象,errObject为错误对象,它至少包含以下3个属性(因为不同类型的错误,属性可能会不同):

code:错误代码,具体请参考plupload上定义的表示错误代码的常量属性

file:与该错误相关的文件对象

message:错误信息

Destroy
当调用destroy方法时触发

监听函数参数:(uploader)

uploader为当前的plupload实例对象

三、Plupload实例的属性

属性描述
idPlupload实例的唯一标识id
state当前的上传状态,可能的值为plupload.STARTEDplupload.STOPPED,该值由Plupload实例的stop()statr()方法控制。默认为plupload.STOPPED
runtime当前使用的上传方式
files当前的上传队列,是一个由上传队列中的文件对象组成的数组
settings当前的配置参数对象
total表示总体进度信息的QueueProgress对象

四、Plupload实例的方法

方法描述
init()初始化Plupload实例
setOption(option, [value])设置某个特定的配置参数,option为参数名称,value为要设置的参数值。option也可以为一个由参数名和参数值键/值对组成的对象,这样就可以一次设定多个参数,此时该方法的第二个参数value会被忽略。
getOption([option])获取当前的配置参数,参数option为需要获取的配置参数名称,如果没有指定option,则会获取所有的配置参数
refresh()刷新当前的plupload实例,暂时还不明白什么时候需要使用
start()开始上传队列中的文件
stop()停止队列中的文件上传
disableBrowse(disable)禁用或启用plupload的文件浏览按钮,参数disabletrue时为禁用,为false时为启用。默认为true
getFile(id)通过id来获取文件对象
addFile(file, [fileName])向上传队列中添加文件,如果成功添加了文件,会触发FilesAdded事件。参数file为要添加的文件,可以是一个原生的文件,或者一个plupload文件对象,或者一个input[type="file"]元素,还可以是一个包括前面那几种东西的数组;fileName为给该文件指定的名称
removeFile(file)从上传队列中移除文件,参数file为plupload文件对象或先前指定的文件名称
splice(start, length)从上传队列中移除一部分文件,start为开始移除文件在队列中的索引,length为要移除的文件的数量,该方法的返回值为被移除的文件。该方法会触发FilesRemoved QueueChanged事件
trigger(name, Multiple)触发某个事件。name为要触发的事件名称,Multiple为传给该事件监听函数的参数,是一个对象
hasEventListener(name)用来判断某个事件是否有监听函数,name为事件名称
bind(name, func, scope)给某个事件绑定监听函数,name为事件名,func为监听函数,scope为监听函数的作用域,也就是监听函数中this的指向
unbind(name, func)移除事件的监听函数,name为事件名称,func为要移除的监听函数
unbindAll()移除所有事件的所有监听函数
destroy()销毁plupload实例

五、文件对象的属性和方法

在很多事件监听函数中,都会提供文件对象给你

属性/方法描述
id文件id
name文件名,例如"myfile.gif"
type文件类型,例如"image/jpeg"
size文件大小,单位为字节,当启用了客户端压缩功能后,该值可能会改变
origSize文件的原始大小,单位为字节
loaded文件已上传部分的大小,单位为字节
percent文件已上传部分所占的百分比,如50就代表已上传了50%
status文件的状态,可能为以下几个值之一:plupload.QUEUEDplupload.UPLOADINGplupload.FAILEDplupload.DONE
lastModifiedDate文件最后修改的时间
getNative()获取原生的文件对象
getSource()获取mOxie.File 对象,想了解mOxie是什么东西,可以看下https://github.com/moxiecode/moxie/wiki/API
destroy()销毁文件对象

六、QueueProgress 对象的属性

plupload实例的total属性是一个QueueProgress对象

属性描述
size上传队列中所有文件加起来的总大小,单位为字节
loaded队列中当前已上传文件加起来的总大小,单位为字节
uploaded已完成上传的文件的数量
failed上传失败的文件数量
queued队列中剩下的(也就是除开已经完成上传的文件)需要上传的文件数量
percent整个队列的已上传百分比,如50就代表50%
bytesPerSec上传速率,单位为 byte/s,也就是 字节/秒

七、plupload命名空间上的一些属性

plupload的命名空间上有一些属性,用来表示一些常量。记住,不是plupload实例的属性,而是plupload的属性

 

属性名称描述
VERSION当前plupload的版本号
STOPPED值为1,代表上传队列还未开始上传或者上传队列中的文件已经上传完毕时plupload实例的state属性值
STARTED值为2,代表队列中的文件正在上传时plupload实例的state属性值
QUEUED值为1,代表某个文件已经被添加进队列等待上传时该文件对象的status属性值
UPLOADING值为2,代表某个文件正在上传时该文件对象的status属性值
FAILED值为4,代表某个文件上传失败后该文件对象的status属性值
DONE值为5,代表某个文件上传成功后该文件对象的status属性值
GENERIC_ERROR值为-100,发生通用错误时的错误代码
HTTP_ERROR值为-200,发生http网络错误时的错误代码,例如服务气端返回的状态码不是200
IO_ERROR值为-300,发生磁盘读写错误时的错误代码,例如本地上某个文件不可读
SECURITY_ERROR值为-400,发生因为安全问题而产生的错误时的错误代码
INIT_ERROR值为-500,初始化时发生错误的错误代码
FILE_SIZE_ERROR值为-600,当选择的文件太大时的错误代码
FILE_EXTENSION_ERROR值为-601,当选择的文件类型不符合要求时的错误代码
FILE_DUPLICATE_ERROR值为-602,当选取了重复的文件而配置中又不允许有重复文件时的错误代码
IMAGE_FORMAT_ERROR值为-700,发生图片格式错误时的错误代码
IMAGE_MEMORY_ERROR当发生内存错误时的错误代码
IMAGE_DIMENSIONS_ERROR值为-702,当文件大小超过了plupload所能处理的最大值时的错误代码

Plupload使用API

转载于:https://www.cnblogs.com/zhuyongblogs/p/5221048.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

广告主产品推词中的NLP

加词&#xff0c;加产品&#xff0c;调价是广告主的核心问题&#xff0c;为了解决广告主加词的问题在阿里巴巴以及速卖通的账户后台提供了加词利器——先知&#xff0c;一键解决广告主烦恼&#xff0c;从此不再为加词而忧愁。一 引言 在目前付费搜索引擎中&#xff0c;买词和竞…

Android 动态设置 layout_centerInParent

RelativeLayout.LayoutParams rp new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);rp.addRule(RelativeLayout.CENTER_IN_PARENT);记录一下转载于:https://www.cnblogs.com/IWings/p/6097134.html

tidevice.exceptions.MuxServiceError: Could not start service: com.apple.testmanagerd.lockdown.secure

错误是在进行利用pycharm IDE和airtest框架进行苹果手机自动化测试遇到的 错误具体如下 [I 210715 10:32:34 _device:572] ProductVersion: 14.6 [I 210715 10:32:34 _device:551] Download https://tool.appetizer.io/iGhibli/iOS-DeviceSupport/raw/master/DeviceSupport/14…

机器人 工具坐标系的标定

概念 工具坐标系是把机器人腕部法兰盘所握工具的有效方向定为Z轴&#xff0c;把坐标定义在工具尖端点&#xff0c;所以工具坐标的方向随腕部的移动而发生变化。 工具坐标的移动&#xff0c;以工具的有效方向为基准&#xff0c;与机器人的位置、姿势无关&#xff0c;所以进行相…

Linux内核分析— —计算机是如何工作的(20135213林涵锦)

实验部分 &#xff08;以下命令为实验楼64位Linux虚拟机环境下适用&#xff0c;32位Linux环境可能会稍有不同&#xff09; 使用 gcc –S –o main.s main.c -m32命令编译成汇编代码&#xff0c; int g(int x){ return x 6;} int f(int x){ return g(x);} int main(void){ r…

apache域名跳转

①编辑虚拟主机配置文件/usr/local/apache2.4/conf/extra/httpd-vhosts.conf如下<VirtualHost *:80>DocumentRoot "/data/wwwroot/111.com"ServerName 111.comServerAlias www.example.com 2111.com.cnErrorLog "logs/111.com-error_log"CustomLog …

php 画图片2

<?php// 使用php操作gd库做图// 1. 创建一个画布资源$im imagecreatetruecolor(200, 50);// 2. 创建背景色// 2.1 得到背景颜色$bg_color imagecolorallocate($im, mt_rand(200, 255), mt_rand(200, 255), mt_rand(200, 255));// 2.2 填充画布imagefill($im, 0, 0, $bg_c…

ABB机器人ROBOTSTUDIO中轨迹与二次开发的问答

问&#xff1a; 在视频学习里&#xff0c;robotstudio可以提取物体的某条轮廓来直接生成路径。请问&#xff0c;1.如果要提取的是模型两边的中心线&#xff0c;也能直接生成路径吗&#xff1f;2.robotstudio有二次开发的功能吗&#xff0c;比如对数据进行运算。我也不知道我说的…

【Python数据结构】——二叉平衡树AVL(查找、构建、删除、插入、打印、遍历)

#!/usr/bin/env python # -*- coding: utf-8 -*- # Time : 2021/7/28 20:57 # Author : linlianqin # Site : # File : 二叉平衡树专题&#xff08;创建、插入、查找&#xff09;.py # Software: PyCharm # description:二叉平衡树的特点&#xff1a;在二叉查找树的…

随笔速记

LVM增加与缩小Swap分区操作 http://blog.sina.com.cn/s/blog_5f2ca1ed0101ebw8.html Ubuntu删除多余内核 # dpkg --get-selections | grep linux # apt-get purge linux-headers-3.0.0-12 linux-image-3.0.0-12-generic # update-grub Ubuntu清理安装包、已卸载软件、已卸载软件…

【测试开发】测试用例讲解

文章目录 目录 文章目录 前言 一、测试用例的基本要素 二、测试用例的设计方法 1.基于需求的设计方法 对日历根据web界面的功能布局分析出的功能框图如下&#xff1a; 继续举一个例子百度云盘非功能测试的案例&#xff1a; 2.等价类 3.边界值 5.正交表 6.场景设计法 7…

Linux下进行Web服务器压力(并发)测试工具http_load、webbench、ab、Siege、autobench简单使用教程(转)...

一、http_load 程序非常小&#xff0c;解压后也不到100K http_load以并行复用的方式运行&#xff0c;用以测试web服务器的吞吐量与负载。但是它不同于大多数压力测试工 具&#xff0c;它可以以一个单一的进程运行&#xff0c;一般不会把客户机搞死。还可以测试HTTPS类的网站请求…

【Python数据结构】——并查集的实现(查找、合并、集合、实例)

#!/usr/bin/env python # -*- coding: utf-8 -*- # Time : 2021/7/30 23:12 # Author : linlianqin # Site : # File : 并查集专题&#xff08;合并、查找、集合&#xff09;.py # Software: PyCharm # description: 并查集其实就是多个数组&#xff0c;每一个数组都…

如何实现ABB机器人与老式焊机的连接控制

问题&#xff1a; 请教一个机器人与老式焊机如何连接&#xff0c;如何设置。 我现在是用SET指令设DO为1再外接继电器来控制焊机工作的&#xff0c;用RESET指令来使焊机停止工作的。现在可 以焊接&#xff0c;但是如果中间停止或机器人报错停止不动&#xff0c;焊机始终处于工作…

gitlab 杂记

GitLab 编译部署 1&#xff0c;请尽量不要在国内主机上部署&#xff0c;中途天朝很有可能导致gem执行出现问题&#xff0c;以下在AWS上部署&#xff1b; 2&#xff0c;系统中必须要有swap分区&#xff0c;不然会出现500错误&#xff1b; 系统版本&#xff1a;CentOS 6.x x86_6…

Hadoop分布式系统的安装部署

1、关于虚拟机的复制 新建一台虚拟机&#xff0c;系统为CentOS7&#xff0c;再克隆两台&#xff0c;组成一个三台机器的小集群。正常情况下一般需要五台机器&#xff08;一个Name节点&#xff0c;一个SecondName节点&#xff0c;三个Data节点。&#xff09; 此外&#xff0c;为…

Windows线程调度学习(一)

前言 Windows 线程调度器的实现分散在内核各处&#xff0c;并且与许多组件都有关联&#xff0c;很难进行系统地学习&#xff0c;所以我打算写几篇文章来记录下自己学习过程中的思考和分析&#xff0c;同时也方便日后查阅&#xff0c;此文可以看作是《Windows内核原理与实现》中…

机器人的有效负荷

问题&#xff1a; 假如我想在程序里做多几个有效载荷,但在手动操纵画面上只能加一个,其它要怎样用?给个实际例子给我啊. 回答&#xff1a; 在搬运中&#xff0c;确实是有载荷发生变化的情况&#xff0c;如两抓(A B)的夹具&#xff0c;有三种载荷情况&#xff0c;1、A抓有载荷…

【Python生成readme文件】——Markdown语法

链接&#xff1a;https://www.cnblogs.com/wj-1314/p/8547763.html

编程之美2.13子数组的最大乘积

题目&#xff1a; 给定一个长度为N的数组&#xff0c;只许用乘法&#xff0c;不许用除法&#xff0c;计算任意&#xff08;N-1&#xff09;个数的组合中乘积最大的一个组&#xff0c;并写出算法的时间复杂度。 如果把所可能的乘积找出来&#xff0c;共有&#xff08;N-1&#x…