网站建设360,网站建设优化汕头,南京网站开发推南京乐识,浙江网站建设设计Plupload有以下功能和特点#xff1a; 1、拥有多种上传方式#xff1a;HTML5、flash、silverlight以及传统的input type”file” /。Plupload会自动侦测当前的环境#xff0c;选择最合适的上传方式#xff0c;并且会优先使用HTML5的方式。所以你完全不用去操心当前…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元素的idurlString 服务器端接收和处理上传文件的脚本地址可以是相对路径(相对于当前调用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上传方式不支持设置该属性。multipartBooleantrue为true时将以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可以跟width和height一起使用但也可以单独使用单独使用时压缩后图片的宽高不会变化但由于质量降低了所以体积也会变小 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实例的唯一标识idstate当前的上传状态可能的值为plupload.STARTED或plupload.STOPPED该值由Plupload实例的stop()或statr()方法控制。默认为plupload.STOPPEDruntime当前使用的上传方式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的文件浏览按钮,参数disable为true时为禁用为false时为启用。默认为truegetFile(id)通过id来获取文件对象addFile(file, [fileName])向上传队列中添加文件如果成功添加了文件会触发FilesAdded事件。参数file为要添加的文件,可以是一个原生的文件,或者一个plupload文件对象,或者一个input[typefile]元素,还可以是一个包括前面那几种东西的数组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文件idname文件名例如myfile.giftype文件类型例如image/jpegsize文件大小单位为字节当启用了客户端压缩功能后该值可能会改变origSize文件的原始大小单位为字节loaded文件已上传部分的大小单位为字节percent文件已上传部分所占的百分比如50就代表已上传了50%status文件的状态可能为以下几个值之一plupload.QUEUED, plupload.UPLOADING, plupload.FAILED, plupload.DONElastModifiedDate文件最后修改的时间getNative()获取原生的文件对象getSource()获取mOxie.File 对象想了解mOxie是什么东西可以看下https://github.com/moxiecode/moxie/wiki/APIdestroy()销毁文件对象六、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网络错误时的错误代码例如服务气端返回的状态码不是200IO_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