前端上传组件Plupload使用指南 支持多文件选择上传

Plupload是一款强大的前端上传组件,支持HTML5、flash、silverlight和传统方式上传,具备多文件选择、拖拽上传、前端图片压缩、大文件切割等功能。通过配置参数、事件监听和方法调用来实现上传操作。详细使用步骤和配置说明可在官方文档中查阅。
摘要由CSDN通过智能技术生成
                Plupload 是一款由著名的web编辑器 TinyMCE 团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代替以前的SWFUpload。

Plupload有以下功能和特点:

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

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

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

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

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

 

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

1、引入js文件

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

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

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

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

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

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

首先看下我的目录结构

目录结构

index.html的代码如下:

复制代码
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Plupload使用指南</title>    <!-- 首先需要引入plupload的源代码 -->    <script src="js/plupload.full.min.js"></script></head><body>    <!-- 这里我们只使用最基本的html结构:一个选择文件的按钮,一个开始上传文件的按钮(甚至该按钮也可以不要) -->    <p>        <button id="browse">选择文件</button>        <button id="start_upload">开始上传</button>    </p>    <script>    //实例化一个plupload上传对象    var uploader = new plupload.Uploader({        browse_button : 'browse', //触发文件选择对话框的按钮,为那个元素id        url : 'upload.php', //服务器端的上传页面地址        flash_swf_url : 'js/Moxie.swf', //swf文件,当需要使用swf方式进行上传时需要配置该参数        silverlight_xap_url : 'js/Moxie.xap' //silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数    });        //在实例对象上调用init()方法进行初始化    uploader.init();    //绑定各种事件,并在事件监听函数中做你想做的事    uploader.bind('FilesAdded',function(uploader,files){        //每个事件监听函数都会传入一些很有用的参数,        //我们可以利用这些参数提供的信息来做比如更新UI,提示上传进度等操作    });    uploader.bind('UploadProgress',function(uploader,file){        //每个事件监听函数都会传入一些很有用的参数,        //我们可以利用这些参数提供的信息来做比如更新UI,提示上传进度等操作    });    //......    //......    //最后给"开始上传"按钮注册事件    document.getElementById('start_upload').onclick = function(){        uploader.start(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法    }    </script></body></html>
复制代码

 

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

目录:

一、配置参数

二、各种事件说明

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值