前端上传组件Plupload:plupload.full.min.js使用指南

发布于:2020-01-06 08:30:45

前端上传组件Plupload使用指南

我之前写过一篇文章《文件上传利器SWFUpload使用指南》,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SWFUpload显然就有点过时了,毕竟html5原生的就给我们提供了文件上传的API。Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代替以前的SWFUpload。

Plupload有以下功能和特点:

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

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

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

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

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


github 网址  https://github.com/moxiecode/plupload15ee46252b521ee1f3c66ca8beb1ecd4.png


Plupload的使用方法也与SWFUpload非常类似,可以分为以下几步:

1、引入js文件,plupload的源文件可以到github上去下载

2、实例化一个plupload对象,传入一个配置参数对象进行各方面的配置。

3、调用plupload实例对象的init()方法进行初始化

4、在plupload实例对象上注册各种你需要的事件。plupload从选取文件到文件上传完成这个过程中,会触发很多事件。我们可以通过这些事件来跟plupload进行交互。

5、实现你自己所注册的那些事件的监听函数,利用这些监听函数来进行更新UI、提示上传进度等工作。

大家可以到http://chaping.github.io/plupload/demo/看一下我写的关于plupload的几个上传demo。

下面用一段代码来说明Plupload的使用方法。

首先看下我的目录结构

目录结构

index.html的代码如下:


        Plupload使用指南    
        
            选择文件        开始上传

使用Plupload的关键是了解它众多的配置参数、事件以及属性和方法。我把它官网上的文档翻译成了中文并整理如下。我也把它放到了github上,你可以到http://chaping.github.io/plupload/doc/去查阅。

目录:

一、配置参数

二、各种事件说明

三、Plupload实例的属性

四、Plupload实例的方法

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

六、QueueProgress 对象的属性

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

一、配置参数

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


参考js代码

62e0bd1f6666d203a90e8457593cec41.zip



原文章

https://www.cnblogs.com/2050/p/3913184.html


阅读 1776+

一片空白

父爱如山,不善表达。回想十多年前,总记得父亲有个宽厚的肩膀,小小的自己跨坐在上面,越过人山人海去看更广阔的天空,那个时候期望自己有一双翅膀,能够像鸟儿一样飞得高,看得远。虽然父亲有时会和自己开玩笑,但在做错事的时候会受到严厉的训斥。父亲有双粗糙的大手掌。