前端上传组件Plupload使用指南
我之前写过一篇文章《文件上传利器SWFUpload使用指南》，里面介绍了上传组件SWFUpload的使用方法，但现在随着html5技术的逐渐推广和普及，再去使用以flash为上传手段的SWFUpload显然就有点过时了，毕竟html5原生的就给我们提供了文件上传的API。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文件，plupload的源文件可以到github上去下载
2、实例化一个plupload对象，传入一个配置参数对象进行各方面的配置。
3、调用plupload实例对象的init()方法进行初始化
4、在plupload实例对象上注册各种你需要的事件。plupload从选取文件到文件上传完成这个过程中，会触发很多事件。我们可以通过这些事件来跟plupload进行交互。
5、实现你自己所注册的那些事件的监听函数，利用这些监听函数来进行更新UI、提示上传进度等工作。
大家可以到chaping.github.io/plupload/demo/看一下我写的关于plupload的几个上传demo。
下面用一段代码来说明Plupload的使用方法。
首先看下我的目录结构
index.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plupload使用指南</title>
<script src="js/plupload.full.min.js"></script>
</headsetoption>
<body>
<p>
<button id="browse">选择文件</button>
<button id="start_upload">开始上传</button>
</p>
<script>
//实例化一个plupload上传对象
var uploader =newplupload.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){

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。