前端上传组件Plupload使用指南【转】

2022-09-25 08:03:13

我之前写过一篇文章《文件上传利器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的一些文件无法上传。

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的代码如下：

<!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/去查阅。

六、QueueProgress 对象的属性

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

一、配置参数

实例化一个plupload对象时，也就是new plupload.Uploader()，需要传入一个对象作为配置参数。后面内容中出现的plupload实例均是指new plupload.Uploader()得到的实例对象
?
更多详细请参考：https://www.cnblogs.com/2050/p/3913184.html

前端上传组件Plupload使用指南【转】

码农公寓

相关文章